Add a hamburger menu to your mobile mode

Looking to make a hamburger menu on your mobile mode? You've come to the right place. 

Downloading the hamburger menu file

Click one of the files below to download a hamburger menu icon in either black or white.



Unzip the downloaded file. This will be the object to activate your dropdown menu. 

Downloading the drop down file

Click the file below to download the drop down action file.

Unzip the downloaded file creating a file called "dropdownmaster.action.js"

Creating the drop down menu on your page

  1.  Select the object or text you want to activate your dropdown menu. When clicked in live view this will open the dropdown menu. 
    - With the object or text selected, head to the "Link" tab in the editing menu and select "Enable Link". Click "Apply" to apply the link.
    Note: Do not set a destination after selecting "Enable Link". 
  2. Create each link you'd like to include in the drop down menu. 
    For each link, be sure to give it a destination through the "Link" tab in the editing menu and click "Apply" to apply the link. 
    Note: D
  3. Group all those links together. 
  4. Select the new group and holding the shift key, select the object or text from step 1. 
  5. With those selected, drag and drop the dropdownmaster.action.js file onto the page. 
    The group and trigger are now together in drop down menu group. 
  6. Click save and view live to play with your new dropdown menu!

Advanced Options

Now that your dropdown menu is set up, You may choose to change how it acts on your live site. 

Select the dropdown menu in edit mode and click the J then S key to open up the JavaScript editor.  

Change trigger from 'hover' to 'click'  to have your menu only open when clicked. 

Change transition to 'fade' or 'slide' to have the menu fade or slide in when clicked.

Change speed from 250 to a larger number to slow down the animation. Change speed to a smaller number to speed up the animation of the drop down menu.

 If you would like a standard navigation menu in desktop mode, Hide the hamburger menu. To do this, select the hamburger menu in desktop mode and click "hide" in the Arrange tab.

Thank you for your feedback!

Was this article helpful?
Thank you for your feedback!