Each menu item has the option to be highlighted. A highlighted menu item is given the class shiftnav-highlight Each skin provides its own styles for highlighted menu items. Below, ShiftNav Free is highlighted In this example, the Standard Light skin is shown. The “ShiftNav Free” menu item is a highlighted link, so its font color is blue. (The “Home” menu item is the current menu item, so its background is blue)

ShiftNav Pro includes over 350 Font Awesome font icons that can be assigned to each item in the menu. To assign an icon to a menu item, open up the menu item settings panel for that menu item. Find the Icon setting Click on the Set Icon button to open the icon selection panel You can type terms in the search box to filter the icons (this is done by the icon class). Click on an icon to set it. Click Save Menu Item to save the setting and it will appear on your menu item. Custom Icon Class Since v1.5 The Custom Icon Class setting allows you to add any class you like to the icon’s <i> tag. If you have selected an icon, this custom class will be appended to the icon class. For example If you have not selected an icon, then this custom class will serve as the entire class, allowing you to use a custom icon.

Each menu item has a setting to define an element on the page that, when clicked, the item will cause the page to scroll to. The menu will then close when the scroll animation has completed. Valid values are IDs or classes – for example #special-content or .user-info. Values must be valid jQuery selectors. When clicked, if there is a matching element on the page, the menu will scroll your site to that element. If the element does not exist on the current page, the menu will follow whatever link is set for that menu item. On the redirected page, ShiftNav will attempt to locate and immediately scroll to any matching element on that page. As an example, let’s say you have an About page with a contact form that is half way down the page. The contact form is wrapped in a div with id=”contact”. Add a Page menu item for the About page. Set the Navigation Label in the WordPress menu item settings to “Contact”. Set the ShiftNav Scroll To setting to #contact. Then: If you are on the About page, and the ‘Contact’ link is clicked, the page will scroll to the contact form. If you are on any other page which does not contain a #contact div, the site will redirect to the About page and then scroll to the contact form. Scroll Offset If your scroll target is bumping up against the top of the site, or being hidden below a fixed top bar, you can adjust the Scroll Offset in the Control Panel > General Settings to space the scrolled element away from the top of the site.

In ShiftNav (free), there will only be one option: Always visible. The submenu items will always be showing (you can choose to indent them in the menu settings). ShiftNav Pro offers two additional types of submenus – accordion and shift submenus. Setting the Submenu Type You can set a global default submenu type, or a different submenu type for each menu item Setting a global submenu type default In the ShiftNav Control Panel, you can set a default Submenu Type. This submenu type will be used by any item in this ShiftNav instance that has its individual submenu type set to “Menu Default”. The individual item’s submenu type is set to Menu Default by default, so this will affect any menu items which have not had their Submenu Type Default set explicitly. Setting a submenu type for an individual menu item The submenu type can also be set on individual menu items in the menu item settings. The default is Menu Default, which will inherit the global setting from the Control Panel. Remember, you set the settings for a submenu via the Submenu tab of the parent item Menu Item Settings Accordion & Shift Submenu Types Accordion Submenus Accordion submenus expand below the parent menu item, sliding down the contents below them. Accordion submenus are designated by a down-arrow. Here’s an example of an accordion submenu: Closed Open Accordion submenus are closed by touching the arrow to retract the submenu. Shift Submenus Shift Submenus shift a new panel over the top of the existing menu, so that only the parent menu item and its submenu become visible. Shift submenus are designated by a right-arrow. In this example, ShiftNav Pro is a Shift submenu Before After Shift submenus are closed by touching the Back button in the menu.