Bootstrap off canvas menu for mobile

  • 22 February, 2019
  • 2

Bootstrap off canvas menu for mobile

Bootstrap is one of the most popular front-end framework among the web designers and developers. It has lots of features as everyone is loving it. The documentation is nicely written and there are lots of plugins designed specially for bootstrap. With these features who doesn’t love it. 

Even with having these many features it has some drawbacks as most of the frameworks. While working on the bootstrap I noticed that that’ll be great to create the off canvas menus for mobile which bootstrap is lacking. The default menu is good but I think the off canvas  menu for the mobile is much better. 

Most of us use the jQuery plugins or write the custom jQuery for creating the off canvas menus. This can be done by using the default bootstrap feature with some line of css only. 

div#nav_collapse {
    display: block !important;
    position: fixed;
    background: #fff;
    height: 100vh !important;
    top: 90px;
    left: -80%;
    z-index: 9999;
    width: 70%;
    transition: all 0.4s;
}
div#nav_collapse.show {
    left: 0;
}

Make sure the navbar-nav is wrapped with the div id “nav_collapse”

Didn't find what you came for?

Don't be sad. We are here for your help. Just request a quote and we will come up for your solution.