« Back to main Free Hosting Bootstrap Builder Free UI Kit
Offcanvas mobile menu illustration

Change navbar collapse to 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.

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?