« Back to main
Offcanvas mobile menu illustration

Change navbar collapse to offcanvas on mobile screen

View demo Download

When you check Bootstrap's navbar on your mobile phone navbar becomes collapsable. Because it has collapse class name. In this example we will show how to turn navbar-collapse wrapper into offcanvas on mobile screens.

When you click on hamburger button, collapsible div appears as drawer menu.

Steps to make navbar collapse as offcanvas
  • Create basic bootstrap navbar
  • Remove data-toggle and data-target attributes from hamburger button (navbar-toggler)
  • Remove class collapse, but keep navbar-collapse
  • Add some styling to .navbar-collapse make it as Mobile drawer sidebar
  • Add click event to hamburger button to toggle "show" class. $(".navbar-collapse").toggleClass("show");
Here are basic code snippets

« Back to all examples

Creating e-commerce project?