Change navbar collapse to offcanvas on mobile screen
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
data-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.
Here are basic code snippets
« Back to all examples