Video Transcript:

EverWeb’s Navigation Menu widget (available in EverWeb version 2.7 or higher) allows you to easily make Hamburger icon styled navigation menus.

Drag and drop the Navigation Menu widget on to your page if you have not done so already.

Style and Position the widget as you like.

In my example, I am going to make the widget full width and fixed position, although it’s not necessary to do this if you don't want to.

Next go to the Widget Settings and tick the ‘Responsive Navigation Bar’ checkbox. The Responsive Options now become available for you to use.

You can set when the Hamburger icon appears by using the ‘Appear at width option. By default this is set to 700px.

You can see how this works, just by resizing the right hand side of EverWeb’s user Interface.

When I narrow the right hand side to less than 700px the Navigation Menu changes to a hamburger style menu!

The menu can be set to appear on the right or left of the browser window.

You can set the background color you want by using the Custom Background Color option.

The Hamburger icon itself can also be customized, and you can use your own custom label for the menu or leave it blank if you don’t want to have a label at all.

Use the customization options to set the color of the hamburger itself and its background color.

To change the font and size of the hamburger and menu label using the Fonts button..

To change the background color of the dropdown menu items, use the background color option in the Dropdown Options section.

Preview your page to see the results!