A Responsive Bootstrap 3 off-canvas Menu for Mobile

The Bootstrap off-canvas menu

The off-canvas menu plug-in for Bootstrap that I am going to show you in this tutorial can be used for smaller screens like mobile phones as a user clicks on the three-line menu toggle button.

The menu will overlap the visible content and it will disappear as a user clicks the cross button (that you may customize).

So, let me start by an online demonstration along with a setting up guide of this off-canvas menu.

A demo of using and setting up Bootstrap off the canvas menu

In this demo, a menu bar is created by using the typical Bootstrap navbar class. The button with three horizontal lines that show up on small screens like mobile or smartphones is given an added class apart from what you normally use i.e. offcanvas-toggle. In addition, the data-toggle=”offcanvas” data attribute is also given.

See the demo and if you are using a bigger screen, resize it so the mobile menu appears. Click on three line button to display the off-canvas menu:

Bootstrap off canvas menu

See online demo and code

Notice this line and see the difference if you already experienced the navbar in Bootstrap:

<button type="button" class="navbar-toggle offcanvas-toggle pull-right" data-toggle="offcanvas" data-target="#js-bootstrap-offcanvas" style="float:left;">

To set up this plugin for your web pages, follow these steps.

Step 1:

Include the bootstrap.min.css and bootstrap.offcanvas.min.css files in the <head> section. You may get plug-in’s package by downloading it from the GitHub site (developed by iamphill) or download directly here. Unzip and get the CSS and JS files.

 <link href=”http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css” rel=”stylesheet”>

<link rel=”stylesheet” href=”css/bootstrap-offcanvas/bootstrap.offcanvas.min.css”/>

Step 2:

Just above the </body> tag, place the jQuery and bootstrap.offcanvas.js JS file. This is also contained in the downloaded package.

Step 3 – the markup:

As mentioned earlier, use the plug-in’s classes and data attribute in the <button> tag for mobile. See the complete code on the demo page.

Coloring the dropdown menu items demo

You may use custom CSS for styling the menu or its items. Using the same off-canvas plug-in, the menu items and divider are assigned some CSS properties for demonstration.

Bootstrap off canvas menu-CSS

CSS used:

<style>
.dropdown-menu{
    background-color: #A8DEEE;
    border: 1px solid #428BCA;
}
.divider{
    border: 1px dashed #428BCA;
}
</style>

While you may use many other classes for the whole menu or parts of it, I have just used the dropdown-menu and divider classes in the <style> section to give off canvas menu a custom look. Rest of the code is the same as in the first example.

Using off-canvas menu with a custom navbar

You may also override the CSS of the navbar-default class for customizing the look of the off-canvas or complete menu. For that, simply change the navbar-default related classes in the <style> section after Bootstrap’s CSS file or in your own external file.

See this demo’s output where off-canvas menu is created by overriding the navbar-default classes:

Bootstrap off canvas navbar

CSS code:

<style>
.navbar-default {
  background-color: #69899f;
  border-color: #425766;
}
.navbar-default .navbar-brand {
  color: #d7e2e9;
}
.navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus {
  color: #e5dbdb;
}
.navbar-default .navbar-text {
  color: #d7e2e9;
}
.navbar-default .navbar-nav > li > a {
  color: #d7e2e9;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
  color: #e5dbdb;
}
.navbar-default .navbar-nav > li > .dropdown-menu {
  background-color: #69899f;
}
.navbar-default .navbar-nav > li > .dropdown-menu > li > a {
  color: #d7e2e9;
}
.navbar-default .navbar-nav > li > .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav > li > .dropdown-menu > li > a:focus {
  color: #e5dbdb;
  background-color: #425766;
}
.navbar-default .navbar-nav > li > .dropdown-menu > li > .divider {
  background-color: #69899f;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
  color: #e5dbdb;
  background-color: #425766;
}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
  color: #e5dbdb;
  background-color: #425766;
}
.navbar-default .navbar-toggle {
  border-color: #425766;
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
  background-color: #425766;
}
.navbar-default .navbar-toggle .icon-bar {
  background-color: #d7e2e9;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
  border-color: #d7e2e9;
}
.navbar-default .navbar-link {
  color: #d7e2e9;
}
.navbar-default .navbar-link:hover {
  color: #e5dbdb;
}

@media (max-width: 767px) {
  .navbar-default .navbar-nav .open .dropdown-menu > li > a {
    color: #d7e2e9;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #e5dbdb;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #e5dbdb;
    background-color: #425766;
  }
}
</style>

The markup is the same as first example.

 

Author - Abu Hassam

Abu Hassam is an experienced web developer. He graduated in Computer Science in 2000. Started as a software engineer and worked mostly on web-based projects.
Just like any great adventure, web development is about discovery and learning.
The web is a vast playground, and the best adventures are yet to come. Happy coding and exploring! ️