Mobile Menu
The Responsive Breakpoint
Your mega menu will automatically collapse down to a mobile style menu on smaller screens. To test the mobile menu simply reduce the width of your browser window. You can adjust the screen width at which the menu converts to a mobile style using the Responsive Breakpoint option under Mega Menu > Menu Themes > Mobile Menu.
It is a good idea to synchronise this option with your theme. For example, if your theme collapses to a mobile style layout at 768px wide, you might want to set the Responsive Breakpoint to 768px too.
The Mobile Toggle Bar
We’ve built a drag and drop toggle bar designer into the theme editor. This allows you to control the elements within the toggle bar and their position. Use the Add block to toggle bar dropdown to add blocks, then click a block to edit it or drag it to reposition it. Pro users can add extra blocks, including logos, search boxes, custom HTML and icons.
Styling the Mobile Menu
Use the options under Mega Menu > Menu Themes > Mobile Menu to adjust the style of your mobile menu. Note that the sub menu styling will be inherited from the desktop menu.
Controlling the visibility of items within the Mobile Menu
It is a good idea to keep your mobile menu as simple as possible. If you want to prevent a specific item or items from appearing in the mobile menu, head to the Appearance > Menus page, hover over the menu item in question and click the blue Mega Menu button to open the settings for that menu item. Open the Settings tab and enable Hide item on mobile.
There is also a Hide sub menu on mobile option.
Mobile Menu Style
With Max Mega Menu you can choose the type of mobile menu to use. By default the menu will drop down below the toggle bar when the toggle bar is clicked, but you can also choose an “off canvas” style where the mobile menu will slide in from the left or right hand side of the page.
To change the mobile menu style, go to Mega Menu > Menu Locations, click your menu location and open the Mobile tab. Choose a Type (Show / Hide, Slide Down, Off Canvas ← or Off Canvas →), a Submenu style and a Speed.
Click Event on Mobile
If you have set your desktop menu to show the sub menus on Hover, we will automatically switch the event to Click on mobiles/touch screen devices. This enables users with touch screen devices to navigate the menu. For items which represent both a link to a page, but also toggle the visibility of their sub menu, there is a Click Event Behaviour option on the Advanced tab of your menu location’s settings. This will let you select between:
- First click will open the sub menu, second click will close the sub menu
- First click will open the sub menu, second click will follow the link
- First click will follow the link (the arrow must be used to toggle sub menu visibility)