Bootstrap 4 Off-Canvas Navigation

Pascal Müller put together a Bootstrap off-canvas menu for mobile screens (i.e. smartphones and tablets) that replaced Bootstrap's standard slide-down-from-the-top menu with a position: fixed; menu that slides in from the right using transition from right: -100% to right: 0.

Bootstrap 4's standard slide-down-from-the-top navbar places the toggle button on the right and the slide-down menu items displayed on the left. Using a slide-in from the right (and not transitioning all the way to the left side) positions the menu items closer to the toggle button, which will be closer to a right-handed user's thumb for quicker access.

This fork updated Pascal Müller's offcanvas navigation from Bootstrap 4 – Alpha 6 to Bootstrap version 4.1.2 (and has been since verified with version 4.6.0).

Demo

Demo page – resize the browser or view it on a mobile phone to see the menu in operation.

General operation

1. The main content (not including the footer) is wrapped in an off-canvas div
2. The toggle button toggles an off-canvas-active class on the wrapping div and the footer, and displays a black overlay at 30% opacity
3. The off-canvas-active class transitions the position of the wrapping div, the footer, and the menu
4. The menu can be closed by either clicking / tapping the toggle button or by clicking / tapping the visible portion of the overlay.

Changes to Pascal Müller's version

Some of the Bootstrap class names were changed from the Alpha 6 version that Pascal Müller used to the Bootstrap 4.1.2 version that I used:

• Change nav class from navbar-toggleable-sm to navbar-expand-md
  • Bootstrap switched to navbar-expand-*
  • Use navbar-expand-md to have the off-canvas menu on tablets
• Replaced nav class bg-faded with bg-light
  • Bootstrap switched to bg-gradient-*, but bg-gradient has to be enabled in the _variables.scss file, so I used bg-light
• Switched the order of navbar-brand and navbar-toggler and removed the Alpha 6 class .navbar-toggler-right – put the logo first
  • The Alpha 6 class .navbar-toggler-right absolutely positioned the toggler on the right
  • Bootstrap's toggler no longer uses position absolute – positioning is now done using flex justify-content: space-between
  • Internet Explorer does not support space-between, so if a visitor to the site is using IE and the window width is less than the expand size (an unlikely scenario), the toggle button will be in the middle of the display.
• Added the same border color to .off-canvas-right .sidebar-off-canvas as is used for .off-canvas-right.active .sidebar-off-canvas (the border was starting out dark gray and transitioning to a lighter color)
• Changed the active class from active to off-canvas-active to make the class name unique
• Animated the toggle icon — I prefer transitioning from a hamburger to an X so it's instantly clear to the user how to close the menu, if they decide to not click a link
• Added an overlay to the body that will close the menu if tapped. The overlay darkens the body text and covers any links in the body that are visible.

Breakpoint

The demo is setup to switch between the off-canvas menu and the navbar menu at 768px (iPad screen width in portrait mode). That can be switched to 576px by changing the navbar class from navbar-expand-md to navbar-expand-sm and changing the media query in the CSS file from max-width: 767.98px to max-width: 575.98px, or increased to 992px by changing to navbar-expand-lg and the CSS media query to max-width: 991.98PX.

Internet Explorer

Some visitors to my sites are still using IE, including IE9, so I've included support for using the offcanvas menu on IE, if the window size is less than the navbar-expand size (e.g. navbar-expand-md).

Bootstrap positions the navbar-brand and the navbar-toggler using justify-content: space-between; for the drop-down menu. IE doesn't support justify-content, so I've added CSS for IE using a media query (-ms-high-contrast: none),(-ms-high-contrast: active) to absolutely position the navbar-toggler on the right.

Note: IE9 doesn't animate the menu, but the menu does show in a narrow window.

Sticky footer

The footer is treated separately from the body of the page using a sticky footer setup. A sticky footer where the body text has a bottom margin the same height as the footer works with Internet Explorer 9, which doesn't support flex. If the footer height could change for different screen widths, then the margin value for the body can be adjusted using JavaScript.

Authors

• Pascal Müller – Initial work – trockendock.io
• Rich DeBourke – Update to work with Bootstrap V4.1.2 – RichDeBourke

License

This code is provided under an MIT License. See the LICENSE file for details.

Updates

2019/05/10 – Validated the offcanvas menu works with jQuery 3.4.1 and Bootstrap 4.3.1.

2020/07/05 – Validated the offcanvas menu works with jQuery 3.5.1 and Bootstrap 4.5.0.

2020/07/20 – Add an aria-expanded attribute to the navbar-toggler button with JavaScript to set the attribute to true when the menu is expanded.

2020/09/13 – Added an overlay that covers the body content while the menu is displayed.

2021/09/21 – Validated the offcanvas menu works with jQuery 3.6.1 and Bootstrap 4.6.0. Also updated the code so it works better with Internet Explorer.