how to build a responsive navigation bar code example
Example 1: responsive flexbox navbar
<nav>
<ul class="menu">
<li class="logo"><a href="#">Grid Header</a></li>
<li class="item"><a href="#">Venstre</a></li>
</li>
<li class="toggle"><a href="#"><i class="fa fa-bars" id="bars"></i></a></li>
</ul>
</nav>
Example 2: 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;
}