Navigation Menu Tabs

Your SNO site has four different Navigation Menu Locations:

1. Header Location “A” is along the top edge of your site or above or below the header, but will always be above the Header Location “B”
2. Header Location “B” is just under your site’s header.
3. Footer Location is in your site’s footer
4. Mobile Location will be used when your site is  on a mobile device or when using the long-form page template.

The links in all four of these Navigation Menu Locations are controlled using the menu editor, which allows you to build menus out of Pages, Categories, Subcategories, and Web Links.  To customize the design of the Navigation Bars found in Header Locations A and B, you use the Navigation Bars section on the SNO Design Options page.  To customize the design of the Footer Menu, you use the Footer section of the SNO Design Options page.

How to Add a New Tab to your Navigation Menus

• Click on Menus under the Appearance tab on the left navigation section of your WordPress dashboard.
• 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.
• In the left column, you’ll see three types of elements: links, categories, and pages.  Click on any one of these to see the options for that element.
• 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.
• You’ll now see that your chosen items are listed in the box on the right.
• 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.
• Click Save Menu in the top right, and your new menu choices will now appear on your site.
• If you created a new menu, add that menu to a Menu Location using the instructions below.

Using Navigation Menu Locations

1. Click on Edit Navigation Menus under the Quick Links tab in the upper left hand corner of your screen.
2. Click on the Menu Locations tab at the top of the screen.
3. You will see the four menu locations listed. For each location, you can choose which menu you want displayed. Once you have chosen menus, click Save Changes

• Header Location “A” is along the top edge of your site or above or below the header, but will always be above the Header Location “B”
• Header Location “B” is just under your site’s header.
• Footer Location is in your site’s footer
• Mobile Location will be used when your site is on a mobile device or when using the long-form page template.

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.
10. Once saved, you should now see the icon nearby the menu item you've assigned it to back on your site.
    

Floating Navigation & Mini Menu Logo

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 expand the Header and Footer section and then expand Navigation Menus.
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. Expand the Header and Footer section and then expand Custom Header Graphics 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. 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.