This widget offers a great solution for site navigation that requires submenus. When a site visitor clicks on a menu item that has a submenu, a new menu slides in containing secondary link items.
Since native options for dropdowns and submenus are extremely limited in Muse, our members frequently request ways to display secondary menu items. This unique menu system offers a great way to display submenus and keeps top navs tidy!
Widget Compatibility: Highly Compatible (No known issues when combining with other MuseThemes widgets)
Current Version: 1.0
Supported Devices: Desktop, Tablet, Phone
1.0: Initial release
Setup in Muse
Place the widget on your site, at the top of the page. Keep in mind that this widget will become your site header.
This widget can be placed on the Master page so that the same nav applies to all pages across the entire site.
Logos and other header items can be placed on top of the widget. Be sure they are in a higher layer.
The widget container will represent the size and shape of your header. Set the height of the header by resizing the widget container.
In most cases, users will want the header to span the entire width of the browser. To do this, set the Resize menu to "Stretch to Browser Width"
Menu Background: This sets the color of the menu background.
Horizontal Padding (% Desktop Only): This setting applies padding between the menu items and the edge of the browser. You can use this setting to ensure that the nav menu aligns with content on your page, if needed. Keep in mind that this setting only applies to the desktop mode.
Padding Between Menu Items (px - Desktop Only): This sets padding between the items in the menu.
Menu Alignment (Desktop Only): Ths allows you to align the menu items left or right.
The Subnav Trigger Border is a border that can be applied around items that have a submenu. The following settings provide styling control:
Subnav Trigger Border Color: Sets the color of the border.
Subnav Trigger Border Opacity: Sets the opacity of the border. Set the opacity to zero to use no border.
Subnav Trigger Border Radius: This sets the radius for the border. Use high values for rounded corners.
Font Color/Size/Family/Weight: These settings control the styling of the text in the nav.
ITEM SETTING SECTIONS
These sections allow you to add all of your site nav content. The sections are all the same, with the exception of Item 1 Settings. Item 1 Settings lacks the "Enable Item" checkbox, since every menu will at least have one item.
There are 6 total possible menu items (i.e. Home, About, Services, etc.). Each menu item may have submenus. Each Item Setting section allows you to customize the setting for each menu item.
Enable Item: This setting enables the primary menu item. Note that this setting will only be found in Item Settings 2-6. Item 1 is enabled by default.
Enable Subnav Items: This setting enables a submenu for the menu item. For example, if you've created a "Services" menu item, check this box to enter submenu items such as Web Design, Logo Design, Branding, etc.
Note that the settings below refer to "Item..." or "Subnav Item...". Item always refers to the top level primary (or parent) menu item. Subnav Item always refers to the items that appear in submenus (child items).
Item Title: This is the menu item name, i.e. Home, About, Services, etc.
Item Link: This sets the link for the menu item. These links should always be complete links using the proper final link structure. In other words, you should know the entire path to the page, such as https://mysite.com/about
Item Link Target: This allows the link to be opened in the same window or a new window. For most standard nav situations, this should be set to the standard – Same Window.
Subnav Item Title: This is the submenu item name, i.e. Web Design, Logo Design, Branding, etc.
Subnav Item Link: This sets the link for the menu item. These links should always be complete links using the proper final link structure. In other words, you should know the entire path to the page, such as https://mysite.com/services/web-design
Subnav Item Target: This allows the link to be opened in the same window or a new window. For most standard nav situations, this should be set to the standard – Same Window.
There are 2 more settings in each Item Settings section. Be careful not to overlook these!
Subnav Background Color: This sets the background color of the subnav menu. This means that your subnavs can have a different BG color than your main nav header if you like.
Subnav Font Color: Similar to the above setting, you can set a new font color for your subnav also.
This widget utilizes a mobile mode for smaller screens such as phones. In this mode, a hamburger icon is shown instead of individual menu items. When the hamburger icon is touched, a menu slides in from the side. All of the menu and submenu items will be seen in this slide-in menu.
Mobile Breakpoint (px): This sets the width where the mobile mode is triggered. This setting may be updated based on the number of menu items you have, or the space that they take up. Menus that are rather wide will need to switch to mobile mode at a higher breakpoint value.
The remaining settings in this section offer styling control of the mobile menu. These settings are self-explanatory and are labeled with their exact purpose and will not be discussed in detail here.