Menu Item Settings

Knowledgebase Docs » ShiftNav » Menu Item Settings

Menu Item Settings 0

Each Menu Item has configurable ShiftNav-specific settings. Opening the ShiftNav Menu Item Settings Panel To edit the settings, hover over a menu item. A button with the word Shift will appear. Click the button to open the ShiftNav Settings Panel The ShiftNav Menu Item Settings Panel Layout On the left, you’ll see the name of the menu item, and below it the menu item’s ID (#menu-item1377) and the menu item type (Page). Below that are tabs that allow you to switch between different panels in the settings. The General tab is open and highlighted by default. On the right, the settings in the current panel are listed. Each setting has a description explaining what it does. In the upper right corner, you’ll see the Save Menu Item button. The ShiftNav Menu Item settings are saved individually for each menu item. Editing Menu Item Settings When you make a change in the menu item settings, the icon in the top right will change to alert you to unsaved changes. Hover over the warning icon for details You can close the settings panel without saving. If you leave the page, the settings will be lost. Menu items with unsaved ShiftNav settings are highlighted in the main Menus Panel Saving Menu Item Settings To save your settings for a specific menu item, click the green Save Menu Item button in the upper right. The changes are saved via AJAX without reloading the page. When the changes have been saved, the icon will turn to a green box with a checkmark Hover over the status icon to see the message Closing the settings panel To close the settings panel, click the × in the upper right corner. To switch to a different menu item settings panel, click the Shift button on that menu item.


Disable Link 16

For each menu item, the link can be disabled. By checking the disable link setting, the item’s URL will be removed and clicking the item will not result in a page reload. This is useful for parent menu item placeholders which don’t actually have content to link to. Once the Link has been disabled, the entire item will act as a toggle for the submenu.


Highlight Link 1

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)


Icons [Pro] 8

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.


Scroll To 11

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.


Submenu Type [Pro] 14

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.