As I scroll down the page, I noticed that the TextField in the header area remains visible. This header is styled using CSS and includes a TextField from the material-ui library.
This is my first time creating a header with CSS. Are there any specific codes or elements that I need to include when designing a header? Please refer to the code snippet below for reference.
- I would greatly appreciate any assistance on this matter. Thank you in advance!
.toolbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #02ABED;
height: 56px;
}
.toolbar__navigation {
display: flex;
height: 100%;
align-items: center;
padding: 0 1rem;
}
.toolbar__logo a {
color: white;
text-decoration: none;
font-size: 1.5rem;
}
.spacer {
flex: 1;
}
.toolbar_navigation-items ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
.toolbar_navigation-items li {
padding: 0 0.5rem;
}
.toolbar_navigation-items a {
color: white;
text-decoration: none;
}
.toolbar_navigation-items a:hover,
.toolbar_navigation-items a:active {
color: black;
}