Back to main Free Hosting Bootstrap Builder Free UI Kit
Offcanvas sidebar illustration

Bootstrap navbar offcanvas on mobile screen

View Demo Download

Get 700+ Material components for the latest Bootstrap 5 for free. This component is also available as ready-to-use solution in MDB UI Kit. Learn more about Bootstrap Dropdown here, or download MDB Free version with 700+ components here.

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 to make it visible by adding opacity:0, visibility:visible and transform(0)
Using this method, you can turn any card into offcanvas on mobile screen. Check demo for details
Here are basic code snippets

Back to all examples

Creating an e-commerce project?