Navigation Menus

Editing the Structure of your Navigation Menus

How to Add a New Tab to your Navigation Menus

1. Click on Menus under the Appearance tab on the left navigation section of your WordPress dashboard.
2. Near the top of the page there is a dropdown menu, either choose the menu you want to edit and click Select or click the link to create a new menu.
3. In the left column, you’ll see various types of elements including, but not limited to: links, categories, and pages.  Click on any one of these to see the options for that element.
4. Put a check next to any of the categories or pages you want added to your navigation menu and click Add to Menu. For links, type in the necessary information and click Add to Menu.
5. You’ll now see that your chosen items are listed in the box on the right.
6. Drag and drop the items into any order that you want. If you want an item to appear in a drop-down menu below one of the other elements, simply drag it slightly to the right so that it is indented. You can have unlimited levels of drop-down elements.
7. Click Save Menu in the bottom right, and your new menu choices will now appear on your site.
8. If you created a new menu, add that menu to a Menu Location using the instructions below.

Adding a Category to a Navigation Menu

1. Click on Menus under the Appearance tab.
2. At the top of the page, above the left column, choose which menu you would like to add your category to, and click Select.
3. Locate the new category in the list of categories in the left column. (You will probably have to click on Categories and then click on View All.)  Select it, and click Add to Menu. Note: If you do not see the category you want, you will first need to add it as a new category.
4. On the right, you can then drag and drop the new category to the appropriate place in your menu.
5. Click Save Menu.

Adding a Page to a Navigation Menu

1. Click on Menus under the Appearance tab.
2. At the top of the page, above the left column, choose which menu you would like to add your page to, and click Select.
3. Locate the new page in the list of pages in the left column. (You may have to click on Pages and then click on View All.) Select it, and click Add to Menu. Note: If you do not see the page you want, you will first need to add it as a new page.
4. On the right, you can then drag and drop the new page to the appropriate place in your menu.
5. Click Save Menu.

Adding a Link to a Navigation Menu

1. Click on Menus under the Appearance tab.
2. At the top of the page, above the left column, choose which menu you would like to add your page to, and click Select.
3. Click where it says Links in the left hand column.
4. Type the URL you want it to link to and the text you want displayed.
5. Click Add to Menu.
6. On the right, you can then drag and drop the new page to the appropriate place in your menu.
7. Click Save Menu.

Creating Dropdown Menus

Click on Menus under the Appearance tab in order to access the WordPress menu editor.  To create dropdown navigation items, simply click on and drag them a bit to the right. This will indent them underneath a main menu item.  They will then show up as dropdown items when you hover over the navigation bar. 

Adding an Icon to a Navigation Menu

Your navigation menus have powerful tools and great options for customization. One feature we’ve integrated into your theme is the ability to spruce up your navigation menus with attractive icons, which you can add to your navigation bar’s menu items.

1. Click on Menus under the Appearance tab.
2. Find the section on the left titled “Menu Icons Settings” and expand it.
3. Under the “Global” tab select the Icon Types you wish to choose from. Each type will contain a bundle of unique icons you can select from later.
4. Under the “Current Menu” tab you can configure individual settings for the menu you’re currently customizing. For example, you can choose to hide the menu item’s label (i.e. “News”) and replace it with the given icon you’ll eventually assign to that location.
5. Under the “Extensions” tab you’ll find any extensions or add-ons for this plugin you may have added or decide to add later, but you can feel free to disregard this tab entirely if you wish.
6. Click Save Settings.
7. Now you’ll be able to apply a menu icon to a specific menu item on the right by expanding the chosen menu in the section on the right where your menus have been placed and clicking on “Select” next to the word “Icon”.
8. As soon as you click on “Select” it will open up a new dialog window with your choices. Scroll through the provided icons to find the one you’re looking for. Click on it and then click Select.
9. Be sure to click on the Save Menu button to save your settings.

Once saved, you should now see the icon nearby the menu item you've assigned it to back on your site.

Adding and Designing Navigation Menus with FLEX Pro

If your website has already been converted to FLEX Pro, your menu placement and design options are much more versatile.

To display a navigation menu within your website's header or footer:

1. Go to SNO Design Options under Appearance.
2. Click into the Site Designer tab.
3. Within the header or footer designer portions of this page, click Add Row and position as desired.
4. Click on Add Content and select one of the following menu styles: Menu - Bar, Menu - Expanded, Menu - Hamburger, Menu - Vertical.
5. Configure the content and design settings as needed.
6. Click Save All Design Options in the top right corner of the page.

Adding and Designing Navigation Menus without FLEX Pro

If your website has not yet been converted to FLEX Pro, your menu placement and design options are slightly more limited. 

To display a navigation menu within your website's header:

1. Go to SNO Design Options under Appearance.
2. Click into the Navigation Menus tab.
3. Choose the menu location of Header Location "A" and select Display Header Location "B" if so desired.
4. Use the Menu Design, Menu Display Style, and Menu Effects fields to customize the appearance of your menu(s). 
5. Click Save All Design Options in the top right corner of the page.

To display a navigation menu within your website's footer:

1. Go to SNO Design Options under Appearance.
2. Click into the Footer tab.
3. Click the box titled Display Navigation Menu.
4. Use the Navigation Menu Options section (in the bottom right corner of the page) to set the Menu Accent Color and Border Thickness.
5. Click Save All Design Options in the top right corner of the page.

Floating Navigation & Mini Menu Logo

IMPORTANT: The following information is only applicable to websites that have NOT yet been converted to FLEX Pro. For those sites that have, the features described below are now built into the Menu Options within the Site Designer.

Your SNO site has the ability to display your menu as a Floating Navigation Bar that will follow your movement while you scroll up and down the page. You can choose which menu will float, its size (small, medium, and large), as well as whether or not to display a Mini Menu Logo (see below) on the bar itself. You can also substitute one of your menu items, such as the Home menu with your mini logo once the navigation bar begins to float as you scroll down the page.

Floating Navigation Bar

1. Head to your site’s dashboard and go to the Appearance section and then to the SNO Design Options.
2. Scroll down and click on the Navigation Menus section.
3. Each Menu Location (Header Location A, Header Location B) allows you to change its settings to display the Floating Navigation Bar.
4. Choose which menu you’ll want to “float” (it’s recommended this be your main menu and the one located under your Header image, usually Header Location B).
5. Set its Alignment, Menu Size, whether or not you want it to Scroll-to-Fix (aka “float”), and whether or not to display your Mini Logo.

6. Click Save.

Mini Menu Logo

1. Head over to your site’s dashboard and go to the Appearance section, then to the SNO Design Options.
2. Click on the Header section.
3. Follow the instructions to upload an image to the Mini Logo for Navigation Bars. * The image should be sized at 150px wide by 50px tall.
4. Next, scroll down and expand the Navigation Menus section and find the option for displaying your Mini Logo and choose from the corresponding drop-down menu whether or not to “Display on Scroll”.
5. Click Save.

Replacing Menu Item with your Mini Logo

A cool feature that’s coupled with the addition of a Mini Logo to your Navigation Bar is the ability to replace a menu item on your Navigation Bar with that mini logo. This option will occur once you start scrolling down the page as the Navigation Bar begins to float following your movement. The most common use for this feature is to set your Home menu item button to display your mini logo once you start to scroll down the page.

1. 1. First be sure you’ve added and configured your Mini Logo and set it to display on your Navigation Bar.
   2. From your site’s dashboard, go to the Appearance section and then to the Menus section.
   3. Find the section at the very top right of your browser that’s titled “Screen Options” and click on it.
   4. A toolbar section will drop down with a bunch of options with checkboxes.
   5. Under “Show advanced menu properties” place a check mark in the box next to “CSS Classes”. Click the Screen Options button again to hide this toolbar.
   6. Next, under the “Edit Menus” tab, select the Menu you want to edit from the drop-down area and find your Menu item (e.g. “Home”) in the list under Menu Structure on the right.
   7. Expand the menu item (e.g. “Home”) you want to be replaced by your mini logo when the navigation bar is “floating” during a scroll down.
   8. Under the CSS Classes section type in the following text without the quotes: “mini-logo”
   9. Click Save.