Bootstrap Menu
Navbar offcanvas template

Bootstrap navbar offcanvas on mobile screen

You might have seen Bootstrap's navbar from your mobile phone. By default navbar becomes collapsable when you click on hamburger icon. But some people prefer Android style drawer menu. In this example we will show how to turn bootstrap navbar into offcanvas or drawer on mobile screen.

Here we will not use bootstrap's default hamburger icon. do not include it in your code. Rather we will add button with resposive show/hide styles and make in visible only for smaller screen size.

Steps to create offcanvas menu from Bootstrap navbar component for mobile devices

• Create basic bootstrap navbar
• Add your class to navbar element controll it. For example mobile-offcanvas,
• Add media query into your css file, add custom styles to you navbar for smaller screen size, then make it invisible with transformX(-100%)
• Add button on your website to show / hide your navbar.
• Now create two functions like function close_offcanvas(){ .... } and function show_offcanvas(){ .... }, add some code that adds/removes class based on click
• Add another styling for .offcanvas-mobile.show to make it visible by adding opacity:0, visibility:visible and transform(0)

Here are basic code snippets