Bootstrap 4 Mobile Menu

This weekend I started experimenting with Bootstrap 4 which is in its Alpha 2 release. While I like what I saw, one lagging feature stuck out to me. Although it works to some extent there are few key CSS features missing to make the Bootstrap 4 navigation collapse like it did in Bootstrap 3. If you simply use the examples provided in the documentation, you will notice that the menu is far from responsive when collapsed on mobile devices.

Luckily there are a few simple fixes we can do to make things right so that our Bootstrap 4 mobile menu (collapsible navigation) is the same functionality as the navbar collapse in Bootstrap 3. For this tutorial I am going to use the Dashboard example from the documentation. You can find the Dashboard example here: http://v4-alpha.getbootstrap.com/examples/dashboard/

First things first, let’s make some small edits to the menu:

    <nav class="navbar navbar-dark navbar-fixed-top bg-inverse">
      <button type="button" class="navbar-toggler hidden-sm-up pull-xs-right" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Project name</a>
      <div class="collapse navbar-toggleable-xs" id="navbar">
        <nav class="nav navbar-nav pull-xs-left">
          <a class="nav-item nav-link" href="#">Dashboard</a>
          <a class="nav-item nav-link" href="#">Settings</a>
          <a class="nav-item nav-link" href="#">Profile</a>
          <a class="nav-item nav-link" href="#">Help</a>
        </nav>
        <form class="pull-sm-right">
          <input type="text" class="form-control" placeholder="Search...">
        </form>
      </div>
    </nav>

<span class="sr-only">Toggle navigation</span>

</button>

<a class="navbar-brand" href="#">Project name</a>

<a class="nav-item nav-link" href="#">Dashboard</a>

<a class="nav-item nav-link" href="#">Settings</a>

<a class="nav-item nav-link" href="#">Profile</a>

</nav>

</form>

</div>

</nav>

You will notice a few things:

For the button, we added a “pull-xs-right” class. Without this the button appears to the left of the branding element.
We added the “collapse” and “navbar-toggleable-xs” classes to the id=”navbar” div. Without this the navbar will not be collapsible. Also, this tells Bootstrap to collapse for “xs” media.
Finally we changed the “pull-xs-right” class on the form element to “pull-sm-right“.

Bootstrap 4 CSS

Our next set of changes is to add some styling. Instead of making edits to the Bootstrap SASS files, which you could do, but I didn’t want to in this case, just in case future releases resolved this issue or made additional changes. So I simply created another CSS file and included it.

.navbar-brand {
  float: none;
}
.navbar-nav .nav-item {
  float: none;
}
.navbar-divider,
.navbar-nav .nav-item+.nav-item,
.navbar-nav .nav-link + .nav-link {
  margin-left: 0;
}
@media (min-width: 34em) {
  .navbar-brand {
    float: left;
    margin-right: 2rem;
  }
  .navbar-nav .nav-item {
    padding-top: .535rem;
    float: left;
  }
  .navbar-divider,
  .navbar-nav .nav-item + .nav-item,
  .navbar-nav .nav-link + .nav-link {

    margin-left: 2rem;
  }
}
@media (max-width: 34em) {
  .navbar-brand {
      display: block;
      height: 50px;
      padding: .55rem 0;
  }

}

.navbar-toggler {
    vertical-align:middle;
    padding: .7rem .7rem;
    margin: .5rem .25rem;
    background-color: transparent;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
}

.navbar-toggler {
    border-color: #ddd;
}
.navbar-toggler:focus, .navbar-toggler:hover {
    background-color: #ddd;
}
.navbar-toggler .icon-bar {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 1px;
}
.navbar-toggler .icon-bar {
    background-color: #888;
}
.navbar-toggler .icon-bar+.icon-bar {
    margin-top: 4px;
}

.navbar-brand {

float: none;

}

.navbar-nav .nav-item {

float: none;

}

.navbar-divider,

.navbar-nav .nav-item+.nav-item,

.navbar-nav .nav-link + .nav-link {

margin-left: 0;

}

@media (min-width: 34em) {

.navbar-brand {

float: left;

margin-right: 2rem;

}

.navbar-nav .nav-item {

padding-top: .535rem;

float: left;

}

.navbar-divider,

.navbar-nav .nav-item + .nav-item,

.navbar-nav .nav-link + .nav-link {

margin-left: 2rem;

}

@media (max-width: 34em) {

.navbar-brand {

display: block;

height: 50px;

padding: .55rem 0;

}

.navbar-toggler {

vertical-align:middle;

padding: .7rem .7rem;

margin: .5rem .25rem;

background-color: transparent;

background-image: none;

border: 1px solid transparent;

border-radius: 4px;

}

.navbar-toggler {

border-color: #ddd;

}

.navbar-toggler:focus, .navbar-toggler:hover {

background-color: #ddd;

}

.navbar-toggler .icon-bar {

display: block;

width: 22px;

height: 2px;

border-radius: 1px;

}

.navbar-toggler .icon-bar {

background-color: #888;

}

.navbar-toggler .icon-bar+.icon-bar {

margin-top: 4px;

}

That’s it! You can play around with the navbar height and padding to adjust your menu if using different base sizes. Your menus now should act and look similar to Bootstrap 3.

About
Latest Posts

Follow me

Jeff Mould

Social Impact Entrepreneur at Haphire, Inc.

Jeff Mould is a social entrepreneur living in Delaware. Jeff Mould is the founder of The MBJ Group, a Philadelphia-based public benefit corporation focusing on reducing recidivism. Jeff Mould blogs about programming and technology in general. Read more about Jeff Mould or follow him on Twitter.

Follow me

Latest posts by Jeff Mould (see all)

Laravel 5.4 Redirect after Password Reset Email Sent - September 8, 2017
How to Fix Laravel 5.2 Token Mismatch Errors - June 30, 2016
How to Get Sirius XM Deals - May 27, 2016