Mobile Menus

Canvas Menus are Mobile First, and can be enabled on any Menu Breakpoint. Super Flexible, Usable and just works.

Custom Menu Breakpoints

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">

Note:

1200 is the Viewport Width

Always Expanded Menus

To always keep the Menus expanded and disable the Mobile Menus, simply set the data-menu-breakpoint="0".

<body class="stretched" data-menu-breakpoint="0">

Off-Canvas Mobile Menus

Make the Mobile Menu Off-Canvas by simply adding the .mobile-menu-off-canvas Class to the .primary-menu Element.

<nav class="primary-menu mobile-menu-off-canvas">
	<ul class="menu-container">
		...
	</ul>
</nav>

Note:

Simply add .from-right Class to reveal the Off-Canvas Mobile Menu from the Right Side.

Alternate Mobile Menu

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

Need Help?