how to make responsive navbar in html code example
Example: css responsive navigation
#header{
position:fixed;
z-index:1000;
left:0;
top:0;
width:100vw;
height:auto;
}
#header .header{
min-height:8vh;
background-color: rgba(0,0,0,0.3);
}
#header .nav-bar{
display:flex;
align-items:center;
justify-content:space-between;
width:100%;
height:100%;
max-width:1300px;
padding:0 10px;
}
#header .nav-list ul{
list-style:none;
position:absolute;
background-color:rgb(31,30,30);
width:100vw;
height:100vh;
left:0;
top:0;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
z-index:1;
overflow-x:hidden;
}
#header .nav-list ul a{
font-size:2.5rem;
font-weight:500;
letter-spacing: .2rem;
text-decoration:none;
color:white;
text-transform:uppercase;
padding:20px;
display:block;
}