One of the challenges of responsive web design that I find most interesting is deciding how to effectively render navigation across all target screen resolutions. Luckily there are flexible frameworks like Bootstrap that make displaying responsive navigation a relatively simple task. However, mobile navigation has been evolving over the past several years, and it can be difficult to keep up with the latest trends. For example, many mobile sites have moved the "hamburger" button from the right hand side of the navigation bar to the left hand side, and the menu now slides in from the side instead of being a dropdown. That said, there is no one definitive "right way" of displaying navigation, and there are certainly many very viable options.

After reading Tim Ellison's blog Bootstrap: LESS is So Much Better I was inspired to write a blog post on my favorite Bootstrap Example - "Offcanvas". The majority of the Bootstrap examples take the more traditional approach to navigation out of the gate by leveraging the dropdown "hamburger" button on the right of the navigation bar at lower screen resolutions. However, it is very simple to take the offcanvas example and expand it to implement a customized navigation solution for low screen resolutions that slides in from the side.

Demo

Begin by downloading the latest version of Bootstrap, and set up a local development environment using the getting started guide. Next, navigate to the Offcanvas Experiment and resize the screen to get a feel for how the offcanvas functionality works. Once ready to begin development, copy down the offcanvas html source code. Download (or reference) the offcanvas.css and offcanvas.js from the Bootstrap site, and create a new .css file that can be used to override the bootstrap and offcanvas styling defaults. Don't forget to update the references in the header and script sections of the HTML file as needed.

After the offcanvas example is in working order on the local development environment it is time to start making a few changes. Begin by modifying the "navbar" section of the HTML and add a few CSS overrides to center the site title/brand logo, move the "hamburger" button to the left of the navbar, and add a search button on the right of the navbar:

HTML






CSS

/*Remove body padding from offcanvas.css since we are using a static navbar*/
body {
padding-top: 0px;
}

@media screen and (max-width: 767px) {
.navbar-header{
text-align:center;
}

.navbar-brand{
display:inline-block;
float:none;
}

.navbar-toggle{
float:none;
color:#FFF;
}

}

Next, implement a few styling tweaks to the offcanvas navigation menu (sidebar) to match the navbar styling. Additionally, make the navigation menu to slide in from the left when the "hamburger" button is used. For the purposes of this example I also added a simple div (offCanvasTrick) that will collapse the navigation menu when the content that was shifted to the right is selected:

HTML

CSS

@media screen and (max-width: 767px) {

.row-offcanvas-left
.sidebar-offcanvas {
left: -65%;
}

.row-offcanvas-left.active {
left: 65%;
}

.sidebar-offcanvas {
width: 65%;
height:100%;
margin-top:-20px;
}

.row-offcanvas-left
.sidebar-offcanvas .offCanvasTrick{
display:none;
}

.row-offcanvas-left.active .offCanvasTrick{
display:block;
height: 100%;
width: 60%;
position: inherit;
top:0;
left:100%;
}

.row-offcanvas-left #sidebar{
text-align:right;
}

#sidebar a.list-group-item{
color:#9D9D9D;
background-color:transparent;
border-color:#333;
}

#sidebar div.nav-container{
background-color:#222;
}

#sidebar a.list-group-item.active, #sidebar a.list-group-item:hover, #sidebar a.list-group-item:focus{
color:#FFF;
}

#sidebar a.list-group-item.active{
background-color:#080808;
}
}

This offcanvas demo also works seamlessly when the search button is selected: