Mac SEO Blog

EverWeb’s Navigation Menu Widget has been updated in version 2.7 so is now responsive! What this means is that the Navigation Menu Widget can automatically adjust to suit the environment you are working in. In essence, this allows you to switch between the ‘traditional’ navigation and a ‘hamburger’ icon styled navigation at a user specified screen width.  The new hamburger icon is highly customizable so that you can get exactly the look to match perfectly with your website.

Getting Started

To start, add the Navigation Menu widget to your page by drag and dropping it from the Widgets tab on to the page, Size and position the widget as you require. For more on customizing the Navigation Menu widget please refer to the blog posts EverWeb’s Navigation Menu Widget: Adding a Menu and Styling Options.

If you already have the navigation Menu widget on the page, select it.

Using the Responsive Options

With the Navigation Menu Widget selected, click on the Widget Settings button in the Inspector Window. You will see the new ‘Responsive Options’ and ‘Hamburger Button’ sections have been added to the widget. We will begin with the Responsive Options.

1. Activate the Responsive Options by ticking the ‘Responsive Navigation Bar’ checkbox.
2. The ‘Appear at Width’ option lets you set at which point the Hamburger navigation is displayed in preference to the regular Navigation Menu. The default value is set to 700 pixels which is usually good for most mobile devices. To see how this option works,  drag the right hand vertical edge of the EverWeb window to the left until the navigation menu changes.
3. When the navigation menu changes you will see that the hamburger icon appears at the top of the page, regardless of where you have placed the navigation as this is the location it would be at on a mobile device. The original location of the navigation menu still appears on the Editor Window as an empty box. You can still work with the widget as usual.
4. If you want to have a hamburger style navigation menu as default for your website in place of the traditional navigation, set the ‘Appear at Width’ value to ‘99999’.
5. As different devices have different screen widths it is difficult to give precise guidelines as to which width to use for which devices.  However, 700 pixels should be suitable for most mobile devices although you may have to go down to 500. Don’t forget to test both desktop and mobile devices before publishing your website.
6. To set where the hamburger appears, select the Menu Position drop down and choose either Right or Left.
7. The hamburger navigation has a horizontal strip across the top of the page which has its color set by ‘Use Background Color’. To change the background color, first tick ‘Use Background Color’ then select the color you want using the Background Color swatch.
8. If you prefer not to have a color set, deselect the ‘Use Background Color’ tick box.

Hamburger Button Options

The Hamburger Button Options section of the widget allow you to customize the Hamburger icon.

1. To change the hamburger icon’s menu label just overtype ‘MENU’ with the label you want. If you do not want any label at all, delete the text from the ‘Label’ box.
2. To customize the size and font of the label click the ‘Fonts’ button at the bottom of the Hamburger Button Options to access the Fonts Panel. Select the font and font size that you require. When you change the font size of the label, the Hamburger icon will also be resized.
3. The color of the Hamburger icon itself is set using the Hamburger Color swatch.
4. To change the background color of the icon and label, tick the ‘custom Background Color’ option then use the ‘Background Color’ swatch.

Dropdown Menu Options

When your click on the Hamburger icon, a drop down menu of choices will appear based on how you have set up your menu structure in the Web Page List.

The color of the menu items is determined from the Hyperlinks Inspector as each menu item is in fact a hyperlink to a page in your website. To change the background of the drop down menu items for the navigation, as well as the separator line, use the Drop Down Menu options in the Widget Settings.

EverWeb’s new Navigation Menu widget options bring new responsive options to EverWeb. We hope you enjoy these new options! If you have any questions about this blog post, please let us know, we’re here to help!

Video Walkthrough

To find out more about using the updated Navigation Menu Widget check out our YouTube video Building a Responsive Navigation Menu.

EverWeb on Social Media

You can also find EverWeb on the following social media platforms:

Facebook

Google+

Flipboard

YouTube

Twitter handle @ragesw