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/
Bootstrap 4 Mobile Menu
First things first, let’s make some small edits to the menu:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<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> |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
.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.
Jeff Mould
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