If you look into nav bar documentations of boot strap 4 you will notice the responsive nav bar with hamburger menu like we used to have in boot strap 3 is missing.
The nav bars in version 4 are having different UX. In my opinion, there are so many sites based on boot strap 3 navbar and people get used to the way it is working.
I personally would prefer to stick with what people are used to than introducing new way of nav bar.
Here is the sample that you need to follow
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<nav class="navbar navbar-light header-background p-x-0" id="nav2"> | |
<button class="navbar-toggler hidden-lg-up pull-xs-right" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2" aria-controls="exCollapsingNavbar2" aria-expanded="false" aria-label="Toggle navigation"> | |
☰ | |
</button> | |
<a class="navbar-brand hidden-md-down p-l-1" href="#"> | |
<img class="img-fluid" alt="" src="/images/Logo.png"> | |
</a> | |
<a class="navbar-brand hidden-lg-up p-l-1" href="#"> | |
<img width="100" alt="" src="/images/Logo.png"> | |
</a> | |
<div class="collapse navbar-toggleable-md pull-lg-right" id="exCollapsingNavbar2"> | |
<ul class="nav navbar-nav p-x-1"> | |
<li class="nav-item"> | |
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> | |
</li> | |
<li class="nav-item"> | |
<a class="nav-link" href="#">Menu 1</a> | |
</li> | |
<li class="nav-item"> | |
<a class="nav-link" href="#">Menu 2</a> | |
</li> | |
<li class="nav-item"> | |
<a class="nav-link" href="#">Menu 3</a> | |
</li> | |
</ul> | |
</div> | |
</nav> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@media(max-width:992px) { | |
.navbar .navbar-brand { | |
float: none; | |
display: block; | |
} | |
.navbar .navbar-nav > .nav-item { | |
float: none; | |
margin-left: .1rem; | |
} | |
.navbar .navbar-nav { | |
float: none !important; | |
} | |
} |
Comments