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 screen.
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 create offcanvas menu from Bootstrap navbar component for mobile devices
- Create basic bootstrap navbar
- Add your class to navbar element controll it. For example
mobile-offcanvas, - Add media query into your css file, add custom styles to you navbar for smaller screen size, then make it invisible with
transformX(-100%) - Add button on your website to show / hide your navbar.
- Now create two functions like
function close_offcanvas(){ .... }andfunction show_offcanvas(){ .... }, add some code that adds/removes class based on click - Add another styling for
.offcanvas-mobile.showto make it visible by addingopacity:0,visibility:visibleandtransform(0)
Here are basic code snippets
Back to all examples