Bootstrap Menu
Navbar offcanvas template

Free navbar offcanvas template for your projects, built with the latest Bootstrap, HTML, CSS & JavaScript. MIT Licensed - free for personal & commercial use.

edit & download Live preview
  • License
    MIT License
  • Free for commercial use?
  • Bootstrap version
  • NPM downloads
  • GitHub stars
    GitHub Repo stars

Bootstrap navbar offcanvas on mobile screen

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

Get more free tools & themes

Join the newsletter to receive more free templates - including Instagram, Facebook or Amazon clone templates, as well as multiple free tools & resources.

    By subscribing you agree to receive the newsletter & commercial information from the data administrator StartupFlow s.c. Kijowska 7, Warsaw. Privacy Policy