The Burger Menu component is a widely recognized design element, frequently used to save screen space, especially on mobile devices. It is represented by an icon of three horizontal lines and typically appears in the upper corner of the screen. When a user clicks or taps this icon, it reveals a hidden navigation menu containing the site's primary links.
Setting Up the Burger Menu
These steps guide you through adding navigation items to your Burger Menu.
Adding a Menu Item
Each entry in the menu is a menu item. To add and configure a menu item:
Open Configuration: Double-click the Burger Menu component on the canvas.
Add Item: Click the Add menu item button.
Set the Label: Write the desired text for the link in the Label field.
Choose Link Type: Select the type of destination from the Link type dropdown menu (refer to the "Understanding Link Types" section below).
Configure Link: Use the provided fields to set up the specific link type you chose.
To add all necessary items, repeat these steps.
To edit an existing item's settings, click the Pen icon next to the item's name.
Adding a Submenu Item
The Burger Menu supports hierarchical navigation using submenus. To create a submenu item:
Open Configuration: Double-click the Burger Menu.
Identify Primary Item: Locate the primary menu item under which you want to nest the submenu link.
Drag to Nest: Click and hold the equal icon (=) next to the new menu item, then drag it below the primary item. The nested item will be indented, indicating it is now a submenu item.
Arranging the Menu Item's Order
The vertical display order of the links in the Burger Menu is determined by the order in the configuration list. To change the arrangement:
Open Configuration: Double-click the Burger Menu.
Select and Drag: Click and hold the equal icon (=) next to the menu item you want to move.
Reposition: Drag the item up or down the list to its desired location.
Tip: Pin the menu to the necessary pages at the top of the styles panel.
Troubleshooting
Burger Menu Closing Unexpectedly on Mobile Devices
If the Burger Menu is closing unexpectedly when viewed on mobile, this issue often occurs when the menu is used in conjunction with the Embed Anywhere feature.
To fix this issue:
Open Publish Settings: Click the blue "Publish" button in your project.
Access Embed Code: Click "Get embed code "</>".
Open Advanced Options: In the Embed modal, click "Advanced options".
Disable Encapsulation: Disable the setting "Encapsulate embed on the destination page".
Note: Encapsulation is typically enabled by default, but can cause conflicts with the Burger Menu's functionality.
Disabling encapsulation should resolve the issue. If the problem persists, please follow the contact details below for further support.
Accessibility and Safari Tabbing
If users are unable to access the Burger Menu when using the Tab key for navigation on the Safari browser, a manual setting change may be required on the user's machine:
Action: The user may need to manually enable the setting "Press Tab to highlight each item on a web page" by navigating to Safari Settings to Advanced.