Our Nav System widget was built to be the ultimate go-to navigation widget for any Muse website, big or small.
We've included two separate widgets in this download: Nav Essentials and Nav System Pro. For smaller, simpler site navigation, Nav Essentials provides an option set perfect for more basic menus. Nav System Pro is a full-featured widget providing loads of options and features for creating a navigation system capable of handling even the largest and most complex site navigation menus.
Widget Compatibility: Highly Compatible (No known issues when combining with other MuseThemes widgets)
Current Version: 1.4
Supported Devices: Desktop, Tablet, Phone
Release Log
1.4: Fixed bug causing the nav open button to fail to work on small (mobile) breakpoints (03/21/2018)
1.3: Improves linking to anchor links, removes overlay when anchor link is selected (08/15/2017)
1.2: Fixes overlay bug seen in Internet Explorer (07/28/2017)
1.1: Fixed issue causing other Muse elements to show above navigation menu overlay, fixed conflict sometimes seen with other widgets such as Media Pro Gallery 2.0, increased number of submenu items available – now infinite. (07/05/2017)
1.0: Initial Release
Setup
Nav System contains two widgets: Nav Essentials and Nav System Pro. Nav Essentials was designed to be a go-to widget for smaller and simpler navigation needs. Nav System Pro is our flagship navigation widget, incorporating the features of Nav Essentials, as well as every other feature we could think of. Separate setup instructions are provided for each widget below.
Nav Essentials - Basic Setup
Drag the Nav Essentials widget from the library and drop into your project in Design mode.
You will notice that there are 2 widget components when you drop Nav Essentials into your project: Nav Essentials and Nav Essentials - Loader. Both widget will be needed. You may place the widgets out of the way, off canvas.
First off, you will need to create a button for opening the navigation menu. For this, you may use a text box, state button, rectangle element, or even an image/icon of your own.
Apply a graphic style to the open button, and place it where you would like it to appear. Remember to pin it if you want it to be persistent.
Open the Nav Essentials widget, and define the open button graphic style in the first menu option field.
Choose an Overlay Transition Type. This setting determines the way in which the overlay enters view.
It's best to jump over to the Loader widget before continuing with the options in the Menu Styling section.
Nav Essentials - Loader
The Nav Essenials Loader widget contains 5 sections for enabling and setting up menu elements. This widget may be duplicated as needed.
Start with your first menu item. It's generally easiest to work top-to-bottom.
Enable Item 1. If you wish to use a menu icon for this menu item, enable the Item 1 Icon as well.
Menu Item Text is the text that will display in the menu for this menu item.
Menu Item ID:Every menu item will need a unique ID. A simple 1,2,3,etc. system will work fine.
Parent Item ID: This ID is used when submenus (2nd level menus) are desired. For main level menu items, you can leave this ID set to 0. We'll discuss this in detail below.
Menu Item Type: For the Nav Essentials widget, you will find the following options:
Link: This is a standard menu item, which is linked to the URL of your choice
Placeholder: This option is used when you are using the particular menu item as a parent item to open a submenu. When Placeholder is selected, the menu item no longer links to a URL, but instead links to the lower level.
Menu Item Icon Any text menu item may have an icon included. The icon will appear to the left of the text. The Font Awesome icon library is supported. To select an icon, visit http://fontawesome.io/icons/ and copy the icon ID seen next to the icon of choice. Paste the icon ID in this field.
Menu Item URL: This field determines where the visitor is taken when the menu item is clicked upon. One thing to keep in mind is that we do not have the ability to provide a selection of internal site page names, as the "Hyperlinks" menu does in the top menu of Muse Design mode. You will need to know the URL of the page you wish to link to. If it is a page on your site, enter the actual URL here. If your site is unpublished, you may need to estimate the URL. You may also return to the Menu Item URL fields after the site is published to finalize these links.
Menu Item URL Target: This dropdown determines whether the link is opened in a new window or the same window.
One great thing about the loader widgets is that you don't have to fill out every loader section – even when using multiple loader widgets. So if you are using multiple parent menu items with separate sets of submenu link items, feel free to duplicate the Loader widgets as needed and arrange them as needed to stay organized
Nav Essentials - Menu Styling Section
We've included extensive styling options. This section contains styling options consistent with our other widgets. Each option won't be discussed individually, as the option name explains the purpose of the option. Important options within this section will be discussed below:
Menu Top Margin: Use this setting to set the margin of the entire menu in relation with the top of the page.
Submenu Indicator Icon: Much like the Menu Item Icon option discussed above in the Nav Essentials - Loader section, you may use icon codes from Font Awesome's icon library as the icon used to indicate that there is a sub-level menu for a particular placeholder menu item.
Back Button Margins & Back Button Padding: These two options use arrays to enter margin and padding settings. If you are unfamiliar with arrays, it's quite simple. Rather than entering numbers in 4 separate fields, arrays allow you to enter all 4 margin or padding settings in 1 field. The numbers in these fields are pixel-based, so the numbers you enter will create pixel margins. The order of the array is: Top, Right, Bottom, and Left for both Back Button Margins and Padding. You will also see an explanation of the array ordering in a tooltip when you hover over the field.
Setting Up Sub-Level Menus
The Nav Essentials and Nav System Pro widget both support main level and sub level menus. Setting up submenus is easy, and the method explained below applies to both widgets.
To create submenu items, duplicate a Loader widget by Alt/Option-dragging the Loader widget. If you've already filled out the menu item loaders, you will overwrite the old settings as you go.
Create new menu items as described in the Nav Essentials - Loader section above. This time though, you will need to enter Parent ID's for every submenu item. The point of entering Parent ID's is to identify which main level menu item you would like the new submenu item to associate with.
For example, if you wish to create new submenu items of "Web Design" and "Print Design" for a Portfolio page, and your main level items and Menu ID's are:
Home (Menu Item ID 1)
About (Menu Item ID 2)
Portfolio (Menu Item ID 3)
You would set the Parent ID's both as "3" for your Web Design and Print Design Parent ID fields. Now, these new pages will exist in a submenu below your Portfolio menu item.
Repeat this process for each submenu item, noting the Menu ID of the main level menu item you wish to associate the submenu item with.
As you assign submenu items to main level "parents", you will want to return to the main menu Loader widget and set the parent menu items to "Placeholder". This will ensure that when a user clicks on the menu item text, it will open submenu instead of a URL link.
As mentioned earlier, you may use as many Loader widgets as you like. And the Loader widgets don't need to be have every menu item enabled before starting with a new Loader widget. This may help you stay more organized.
Only 2 levels of menus are possible: main menu and submenu items.
Nav System Pro & Nav System Pro - Loader Widgets
The Nav System Pro and Nav System Pro - Loader widgets contain all of the same features included in the Essentials widgets. Rather than repeat the same information covered above, we will focus on the additional features found in the Pro versions.
Nav System Pro - Loader:
This widget greatly resembles the Nav Essentials Loader widget. The ordering of the options are a little different, in an attempt to improve usability. For basic setup, refer to the Nav Essentials - Loader section above. We will be covering only the "Pro" options in this section.
Menu Item Type: This option dropdown is the biggest difference between the Pro and Essential Loaders. The Pro Loader contains many more options here:
Image: This option allows you to use images in your nav menu. Great for logos.
Header: These text-based menu options are great for creating separate sections within your menu. They are not linked, as they are considered "titles" for sections. This text has it's own styling options (found in the main Nav System Pro widget).
Link: Linked text items – the same as seen in the Nav Essentials Loader.
Placeholder items are text elements that do NOT have URL links applied. When Placeholder is selected, it makes the text "link" become a link to the submenu. This setting is best utilized when applying to parent text items that open submenus.
Custom HTML: This is great for bits of text, like the "Made with Love" message seen in the live preview. It's a sort of "catch all" for menu items that don't fall into other categories.
Social Media: This option displays social icons. Individual social icons can be enabled or disabled, and custom URL's can be entered in the last section of the Nav System Pro - Loader widget: Social Media Settings.
Social Media Settings:
This section contains all custom settings when social media menu items are enabled in the section above.
Nav System Pro:
The main Nav System Pro widget is similar to the Nav Essentials widget. The biggest difference is that there are individual sections for each Menu Item Type available in the Loader widget.
General Menu Styling: This section contains all of the "general" style settings for the overlay, submenu and back button. These settings are the same as seen in the Nav Essentials widget.
Text Item, Image Item, Header Item, Social Media Item, and Custom HTML Item Styling sections: These sections offer styling sections unique to each of the Menu Item Types available in the Loader widget. If you wish to use separate fonts, colors, sizes, etc. for separate Menu Item Types, you may enter unique settings into these style sections. Any style setting applied to a Menu Item Type will apply to all items of that item type. See the Live Preview for an examples of separate fonts, colors, weights, etc.