Andrey K. Andrey K. - 5 months ago 95
CSS Question

Bootstrap 4 navbar menu (mobile) style like in Bootstrap 3?

Bootstrap 4 example

enter image description here

Bootstrap 3 example

enter image description here

How to get Bootstrap 4 menu like in Bootstrap 3?

This code from bootstrap 4

<div class="container">
<nav class="navbar navbar-light bg-faded">
<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#navbar-header" aria-controls="navbar-header">
<div class="collapse navbar-toggleable-xs" id="navbar-header">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
<form class="form-inline pull-xs-right">
<input class="form-control" type="text" placeholder="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</nav> <!-- /navbar -->
</div><!-- /container -->


You need to add some css in bootstrap 4 and I imagine they are doing this because you can toggle the menu at different sizes so you need to add the media queries to whatever size you want your menu to open at. Something like so:

Here is a fiddle with some custom styles for the bootstrap 4 navbar Bootstrap 4 Navbar Fiddle

@media(max-width:33.9em) {
  .navbar .collapse {max-height:250px;width:100%;overflow-y:auto;overflow-x:hidden;}
  .navbar .navbar-brand {float:none;display: inline-block;}
  .navbar .navbar-nav>.nav-item { float: none; margin-left: .1rem;}
  .navbar .navbar-nav {float:none !important;}
  .navbar .collapse .dropdown-menu {
    position: relative;
    float: none;