Mobile Off-Canvas Menu

Edition: Pro. Requires an active Pro license. Without one this feature shows a Pro banner and cannot be used.

What it does

Below a screen width you choose, the menu is replaced by a hamburger button. Tapping it slides in an off-canvas panel with the same menu. On wider screens the panel never appears.

Where to find it

In the JHFB Nav Menu addon, the Mobile & Off-canvas group.

Settings

• Mobile menu below: Laptop (1200px), Tablet (992px), Mobile (768px) or Never (no off-canvas).
• Hamburger color and Hamburger size.
• Off-canvas side (left or right) and Off-canvas width.
• Off-canvas background, Off-canvas text color, Active item color and Overlay color.
• Off-canvas logo: an optional image at the top of the panel.

How it behaves

• The panel closes with the close button, by tapping the overlay, with the Esc key, or when a link is tapped.
• Submenus expand inside the panel, one toggle per item.
• While it is open the page behind does not scroll, and keyboard focus stays inside the panel.
• The panel is placed at the end of the page, so header effects such as sticky or shrink never trap it.