Change navbar collapse to 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.
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-toggleanddata-targetattributes from hamburger button (navbar-toggler) - Remove class
collapse, but keep navbar-collapse - Add some styling to
.navbar-collapsemake 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