We are going to create 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. Most front-end designers do not know that this can be achieved by adding some lines in css. 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”
To view the demo click the button below. Note: Make sure you minimize the browser to view the mobile view of the website. or you can click here to directly access the mobile view.
You might be wondering that the three lines which represents the navbar for mobile device are not changing to the cross button or close button in the demo. As I have already said that we are using the default boostrap navbar. We are not adding any extra features except for creating the bootstrap off canvas menu for mobile device. If you want all those features there are unlimited jquery plugins.
You might be interested in this topic as well:
1. BEST SEO PLUGINS FOR WORDPRESS WEBSITES
2. HOW TO DOWNLOAD SHUTTERSTOCK IMAGES FOR FREE?
3. FREE WEB DESIGN RESOURCES WEBSITE TO BOOKMARK
Leave A Reply