By EverWeb’s updated Navigation Menu widget adds the feature many users have been looking forward to. The updated widget in EverWeb version 2.7 makes hamburger icon style navigation possible which is perfect for both mobile and desktop sites. It’s also significant in that this is the first time EverWeb has included an in built, responsive, feature to the product.
What’s a Responsive Feature Anyway?
A responsive feature is one where the feature adapts automatically to its environment. In the case of the Navigation Menu widget you can now have it scale automatically to suit the device that you’re using e.g. on a desktop computer you may have the navigation appear as a horizontal list of menu items, optionally with dropdown menu items (which we will refer to as a ‘traditional’ navigation). On a mobile device you may want the navigation to appear as a Hamburger icon menu instead. Clicking on the hamburger icon would reveal a vertical list of menu options, with the same sub menu options available as before.
The Navigation Menu widget does this scaling automatically to match the device that it is being used on. The best thing is that it just takes a click of a button to set up!
How The Responsive Navigation Menu Widget Works
To setup responsive navigation, first add the Navigation Menu widget to your page and size and position as you want if you haven’t done so already. If you already have the widget on your page, select it. Next, go to the Widget Settings tab and tick the ‘Responsive Navigation Bar’ checkbox in the ‘Responsive Options’ section. That’s all you need to do.
The Responsive Options are now available so first take a look at the ‘Appear at width’ option. This is the pixel width, also known as the ‘breakpoint’, at which the navigation toggles between the traditional (>700 pixels) and hamburger icon style navigation (=<700 pixels). Change the setting to suit your website’s requirements. If you always want the hamburger icon displayed instead of the traditional navigation, set ‘Appear at width’ to 99999.
The 700 pixel width is the used as the default as it’s usually the right breakpoint screen width for most mobile phones. It’s always advisable to test different devices to see which setting is best before publishing your site. You may fi a value somewhere between 700 and 799 pixels works better.
The hamburger icon style navigation works in the same way as the traditional navigation, using the Web Page List to generate the menu structure and any dropdown menu items created through the Web Page List’s folder structure. The only difference between the two styles is that menu items are displayed horizontally for the traditional navigation and vertically for the hamburger icon style navigation.
Navigation Menu Widget Placement
You can test how the navigation menu will look from within EverWeb itself. Click and drag the right hand side of EverWeb’s app window to the left. Once you get past the ‘Appear at width’ breakpoint, the navigation will change to the hamburger icon style.
Notice that when the navigation changes, it’s automatically pinned to the top of the page regardless of where you’ve positioned the widget on your page. The hamburger icon style navigation also stretches full width across the page which is appropriate for mobile devices.
If you’re using a combination of traditional and hamburger navigation styles in your page, the selected Navigation Widget appears empty when the hamburger icon style navigation is visible. Also note that even if the traditional navigation is not set as ‘Full Width’ the hamburger navigation will always appear full width.
Finally, hamburger menu items only display when you Preview or Publish. In contrast, you can mouse over dropdown menu items in the traditional navigation in the Editor Window to see how the look.
Options, Options, Options
The hamburger icon, its background and its text label are all fully customizable. Just use the ‘Hamburger Button’ options to select the styling you want. If you don’t want a text label displayed just leave the ‘Label’ box empty.
You can change the hamburger icon size by using the Fonts button in the Hamburger Button options and changing the ‘Font Size’. Note that this will also change the size of any text Label you may be using. The same is also true if you change the size of the text label, the hamburger will adopt the same font size.
Dropdown Menus
When using responsive navigation, the dropdown menu items adopt the same color scheme as the traditional navigation. As such, it’s important to match the color of the hamburger, hamburger background color and label text correctly. The dropdown menu option colors are shown in the ‘Dropdown Menu Options’ section of the Widget Settings. To test that the colors work correctly in all situations, it’s best to preview your site before publishing.
The newly updated responsive navigation menu is really easy to use and offers a completely customizable experience so you’ll always get the perfect navigation menu style for your website.
Loading ...
Comments