Create a custom hamburger menu to your mobile site

We're now offering a much simpler method to automatically create a menu for your mobile site. Click to read our navigation menu article. If you're looking to make your own custom hamburger menu on your mobile site — read on.

Downloading the hamburger menu file

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

black hamburger.png.zip

white hamburger.png.zip

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.

dropdownmaster.action.js.zip

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

Creating the drop down menu on your page

  1. Create the text that you’d like to use to trigger the dropdown menu to appear. 
  2. Choose a word as the “trigger”. This will be the word to click on to make the drop down action occur. 
  3. Select the “trigger” text box and go to the Editing Menu under “Link”. 
  4. Change the “Link to” from “No Link Set” to “Your Pages” with no destination.
  5. Click “Apply”
  6. Create a link for each item that you’d like to include in the drop down.
  7. Select the items that you want to appear in the drop down by holding “Shift” and clicking on each text box. 
  8. Group them under the “Arrange” tab in the Editing Menu.
  9. Click once on the group and while holding “Shift”, click on the “trigger”.
  10. Drag the dropdown file from your computer onto the text
  11. You’ll notice a warning at the bottom middle of the screen saying “Group”.
  12. Click “Save” and “View Live” to view your dropdown!  



Advanced Options

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

  1. Select the dropdown menu in edit mode and click the J then S key to open up the JavaScript editor.  
  2. Change trigger from 'hover' to 'click'  to have your menu only open when clicked. 
  3. Change transition to 'fade' or 'slide' to have the menu fade or slide in when clicked.
  4. 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 from the Editing Menu. 


Thank you for your feedback!

Was this article helpful?
Thank you for your feedback!