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

Question

Bootstrap 4 example

Bootstrap 3 example

How to get Bootstrap 4 menu like in Bootstrap 3?

This code from bootstrap 4 http://v4-alpha.getbootstrap.com/examples/navbar/:

<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">
          &#9776;
        </button>
        <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>
            <li class="nav-item">
              <a class="nav-link" href="#">Features</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Pricing</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">About</a>
            </li>
          </ul>
          <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>
          </form>
        </div>
      </nav> <!-- /navbar -->
</div><!-- /container -->

Solution

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;}
  .nav-item{width:100%;text-align:left;}
  .navbar .collapse .dropdown-menu {
    position: relative;
    float: none;
    background:none;
    border:none;
  }
}

Comments

[Andrey K.]

Thanks! This worked. And how to add background for a selected menu item?

[Faizan Anwer Ali Rupani]

this doesn't work with newer bootstrap version css

[ram4nd]

I would consider this a bad example, because no extra css is necessary to achieve this.

[Steve K]

@ram4nd this post is over three years old. At the time this was bootstrap 4 alpha and extra css was necessary. They have since updated the framework considerably.