👍🏽 Adding a burger menu
From the top menu bar, click on the Add Menu (
Shortcut: M)Search for and select Burger Menu
Click and drag the element onto your canvas
Tip: Pin the menu to the necessary pages at the top of the styles panel.
🔗 Link types
When adding a menu item, you'll be able to select from a range of links; some settings may change depending on which link type you choose, so it's essential to understand what each one does before starting to set up your menu.
Link Type | Description | Configuration Options |
Page | Links to internal pages in your project | Go to page: a dropdown menu from which you can select the page to which you want to link
Animation: a listing of animations to transition from one page to another |
Element | Links to a specific element or section in your project | Widget select: a dropdown menu from which you can select the element to which you want to link (you must give widgets names in the layers panel so they show up). |
External | Links to an external URL | External URL: The field where you must put the URL
Open in a new tab: Toggle to open the URL in a new tab
Add rel=nofollow: Toggle to add rel=''nofollow'' attribute to your link
Add rell=sponsored: Toggle to add rel=''sponsored'' attribute to your link
|
Redirects the user to Gmail with the specified email address as the recipient | Email: The field where you must write the recipient's email address
Subject: The field where you must write email's subject | |
Phone | Redirects the user to make a phone call | Phone: The field where you must write the phone number |
File | Allows the user to download a preloaded file | File to be downloaded: Click to upload the file from your PC
Target: Choose the redirection's behavior (download, open in a new tab, or open in current tab)
Download filename: The field where you must write the file's name
|
Setting up a Burger Menu
Adding a menu item
Double-click the Burger Menu
Click on Add menu item
Write the item's name in the Label field
Choose the link type from the Link type dropdown menu
Set up the link type you've chosen (refer to the Link Types section above)
To add all of the necessary items, repeat these steps as many times as needed. If you need to edit a setting, click the Pen icon next to the item's name to enter the options.
Adding a submenu item
Double-click the Burger Menu
Click and hold the equal icon (=) next to the menu item you want to move
Drag it below the primary item you
Arranging the menu item's order
The navigation pager order is affected by the order of your menu items in the list. Follow the steps below to arrange them when needed.
Double-click the Burger Menu
Click and hold the equal icon (=) next to the menu item you want to move
Drag it up or below the item you need
🎨 Styling a Burger Menu
Background:
Container: Change the Burger Menu background color
Sidenav: Change the Side Navbar background color
Sub menu: Change the Sub menu item's background color
Menu Item: Change the menu item's background color
MenuItemHover: Change the menu item's background color on hover
Menu Item Active: Change the menu item's background color when selected
Text:
Burger Icon: Change the burger icon color
Menu Item: Change the Menu item text's color and size
Menu Item Active: Change the Menu item text's color and size when selected
MenuItemHover: Change the Menu item text's color and size on hover
Sidenav: Style the menu items' text and set the arrow and close icon's size
Sub menu: Style the Submenu item's text
Margin: Add margin to the Close button
Padding: Add padding to the element's container, menu items, and submenu items.
Border: Set a border color, opacity, and line weight for the element's container, menu items, submenu items, and the side navbar
Border Radius: Curve the radius of the border of the element's container, menu items, submenu items, and the side navbar
Effects: Add different types of shadows or blur effects to the element's container, menu items, submenu items, and the side navbar. Learn more about effects
Opacity: Adjust the transparency of the element's container, menu items, submenu items, and the side navbar
Transform: Change the Side navbar's width and height
Icons:
Set custom shape: Replace the default icons with a shape or a custom SVG
Set custom image: Replace the default icons with an image
