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 view.
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 change navbar to offcanvas only on mobile devices
- Create basic bootstrap navbar
- Add your class to navbar element controll it. For example
offcanvas-mobile, make it invisible with transform -100% - Add media query into your css file, add custom styles to you navbar for smaller screen size
- Add button on your website to show / hide your navbar. Do it with jQuery's
toggleClass("show") - Hide button on large screen size
- Add another styling for
.offcanvas-mobile.showto make it visible. For ex: transform(0)
Here are basic code snippets
« Back to all examples