Canvas Menus are Mobile First, and can be enabled on any Menu Breakpoint. Super Flexible, Usable and just works.
You can now add Custom Breakpoints with Canvas for the Mobile Menus according to your needs in
px. This is helpful when you have a longer menu and require the Menu to be responsive on a Custom Breakpoint.
<body class="stretched" data-menu-breakpoint="1200">
1200 is the Viewport Width
To always keep the Menus expanded and disable the Mobile Menus, simply set the
<body class="stretched" data-menu-breakpoint="0">
Make the Mobile Menu Off-Canvas by simply adding the
.mobile-menu-off-canvas Class to the
<nav class="primary-menu mobile-menu-off-canvas"> <ul class="menu-container"> ... </ul> </nav>
.from-right Class to reveal the Off-Canvas Mobile Menu from the Right Side.
You can add an Alternate Mobile Menu to show on Mobile Devices. Simply add a New Menu Code inside the Primary Menu Navigation with the
.mobile-primary-menu Class alongside the Existing Menu. Example:
<!-- Primary Navigation ============================================= --> <nav class="primary-menu"> <ul class="menu-container"> .... </ul> <ul class="menu-container mobile-primary-menu"> .... </ul> ....
Last Modified: April 12, 2023