Menu Canvas Particle

Manage the way your menu is displayed with an offcanvas sidebar slides in from the left or right side of the page. Choose between Slide, Reveal and Push offcanvas animations. Optionally, you can display the offcanvas bar on the right or use the modal animation to display the menu in a modal. See Demo Page.

# Menu Canvas Joomla Package contents

Files	Description
jlmenucanvas.yaml	Contains the Menu Canvas particle settings.
jlmenucanvas.html.twig	The Twig file to pull information, settings.

# Menu Canvas WordPress Package contents

Files	Description
jlmenucanvaswp.yaml	Contains the Menu Canvas WordPress particle settings.
jlmenucanvaswp.html.twig	The Twig file to pull information, settings.

# Menu Canvas Grav Package contents

Files	Description
jlmenucanvasgrav.yaml	Contains the Menu Canvas Grav particle settings.
jlmenucanvasgrav.html.twig	The Twig file to pull information, settings.

Installation Installing the particle on your website is a really simple process. You can refer to the document here to know more.

Requirements Menu Canvas particles require Uikit 3 for Gantry 5 Atom to be installed and enabled in your theme layout settings.

Go to Template/Theme Settings > select the Layout to add Menu Canvas particle (i.e: Home) -> Layout tab -> Drag and drop the Menu Canvas Particle from Particles panel (left corner) to the section you want to display the particle.

Settings

Settings	Description
Menu	Select menu to be used with the particle.
Base Item	Select a menu item to always be used as the base for the menu display.
Start Level	Set the start level of the menu.
Max Levels	Set the maximum number of menu levels to display.
Render Titles	Renders the titles/tooltips of the Menu Items for accessibility.
Force Target Attribute	Adds target="_self" attribute to all menu links instead of omitting the default value. Fixes an issue with pinned tabs in Firefox where external links always open in a new tab.
Menu Toggle Text	Show the text label Menu next to the hamburger icon.
Module Id	Pick a Module
Chrome	Module chrome.
Visibility	Display the element only on this device width and larger.
CSS Classes	CSS class name for the particle.

Style Tab

Settings	Description
Toggle Color	Customize the toggle color if needed.
Toggle Color Hover	Customize the toggle color on hover.
Menu Behavior	Select the menu type displayed on click.
Menu Animation	There are two different menu animations to display the menu when toggled.
Show Close Icon	Use this option to create a close button and enable its functionality.
Offcanvas Animation	Common settings for Offcanvas animation.
Overlay	Use this option to add an overlay, blanking out the page,
Animation modes	Choose between Slide, Reveal and Push offcanvas animations.
Display on the right	Use this option to display the offcanvas bar on the right.
Menu Toggle Height	Set the height of a Menu Toggle.
Background Color	Customize the background color for offcanvas bar.
Inverse Color	Set light or dark color mode for nav icon, buttons and controls.
Modal Animations	Use the modal animation to display the menu in a modal.
Center vertically	Center the menu and the content vertically.
Nav Settings	Common settings for Nav
Menu Style	Choose the Menu Style.
Center horizontally	Center the menu and the content horizontally.
Nav Color	Customize the nav item color if needed.
Active Color	Customize the nav item hover/active color if needed.
Nav Header Color	Customize the Nav Header Color.
Margin Top	Set the top margin.

General, Parallax and Parallax Background tab

Please take a look the documentation here for more detail about these tabs settings

Introduction
Settings