Documentation: ShiftNav

Knowledgebase Docs » ShiftNav

Highlight Link 0

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)

View

Icons [Pro] 7

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.

View

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.

View

Submenu Type [Pro] 7

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.

View

Configuration 2

ShiftNav can be configured through the ShiftNav Control Panel, which is accessible in your WordPress admin panel under Appearance > ShiftNav Main ShiftNav Settings This tab is specific to the main ShiftNav Panel which is created by default when you install ShiftNav. The settings on this tab will control the main ShiftNav instance. Toggle Bar This tab controls the main toggle bar, which toggles the Main ShiftNav open and closed. You can configure the settings for the toggle bar here. +{instance-name} [Pro] The tabs for any additional ShiftNav instances you create via ShiftNav Pro will appear with a + in front of the instance ID. These contain settings specific to that instance. General Settings This tab contains global settings for ShiftNav. These settings affect all menus and the functionality of ShiftNav overall, as well as miscellaneous configuration options for the plugin. Resource Links In the upper right, you’ll see links to the ShiftNav Knowledge base and to the Support Forum (for Pro users). + Add ShiftNav Instance [Pro] The green button in the upper right allows you to add new instances of ShiftNav. See the Instance Manager article for more information.

View

Assigning a Menu 1

Assigning a menu to your Main ShiftNav Panel When you install ShiftNav, it will automatically register a new Theme Location called ShiftNav [Main]. This is the theme location that is used in the main instance of ShiftNav that is automatically added to your site when you install the plugin. To set which menu will appear, navigate to Appearance > Menus > Manage Locations and set your desired menu in the ShiftNav [Main] Theme Location You can assign an existing menu to ShiftNav, or you can create a brand new menu and assign that instead. Assigning a menu to an additional ShiftNav Instance [Pro] If you have created an additional ShiftNav Instance with ShiftNav Pro, you can set the menu within the special +tab for that instance. You can either select a theme location to display (the menu will be automatically determined by the menu assigned to that theme location), or you can set a specific menu. Using Theme Locations is more flexible, however if you don’t need that flexibility, setting a specific menu is easier as you can skip setting up special Theme Locations. If you set both, the Display Menu setting will override the Theme Location setting.

View

Configuring Toggle Bar Display 10

The toggle bar is the bar that sits at the very top of your site and toggles the menu open and closed when clicked. Toggle Bar Settings Tab The toggle bar can be configured through the Toggle Bar settings tab located in Appearance > ShiftNav > Toggle Bar Displaying the toggle bar only on small screens The Toggle Breakpoint is the point at which you want to display your mobile menu instead of your desktop menu. Out of the box, the toggle bar will always be visible. However, for most users you will want the bar to only display on mobile devices. You can change the Toggle Breakpoint setting to only display the toggle bar below certain widths. Device widths vary widely, but a good starting point is 960 Width Device 960 Tablets 767 Mobile Devices (phones) Most users will want to set the Toggle Breakpoint to 960 or 767 Hiding the theme’s menu To hide the theme’s menu, you’ll need to find the appropriate class or ID to hide. The easiest way to do this is to use the Chrome Developer Tools – right click on the theme’s menu and click “Inspect Element”. Look up the DOM tree for the nav or div that is wrapping your menu’s topmost ul, and use the ID or class from that element to hide the menu. If you need to hide multiple menus, you can comma-separate their selectors. For example, .top-menu, #main-menu. This works just like a normal CSS selector, and that is how this setting will be used by the plugin to hide the targeted elements. Hiding UberMenu UberMenu 2 If you are using UberMenu 2, the appropriate selector will be #megaMenu. UberMenu 3 To hide all UberMenus in UberMenu 3, you can check the Hide UberMenu box in the ShiftNav […]

View

Installing Updates [Pro] 0

When updating, all settings in the ShiftNav Control Panel and menu item options will be preserved. Changes you have made directly in the plugin files on the server will be overwritten. Via FTP 1. Download the latest version of ShiftNav Pro from your Purchase History page Please note you will need a current, valid license in order to download. 2. Open up your FTP Client and connect to your server 3. Navigate to the wp-content/plugins/ directory in your WordPress installation 4. If you have made any customizations, back up the shiftnav-pro/custom directory before proceeding. 5. On your desktop, unzip the ShiftNav Pro plugin file. You should have a folder shiftnav-pro/ 6. FTP the shiftnav-pro/ folder into your server’s wp-content/plugins directory to overwrite the old files 7. If your custom.css has been overwritten, re-upload your backup copy. Via the WordPress Admin To update the plugin via the WordPress admin, you’ll need to first install the Easy Theme and Plugin Upgrades plugin from the WordPress repository. Please note if you have made any edits to the plugin files, they will be lost. Be sure to back up your /custom directory before updating if you have made any changes there. 1. You should always make a backup of your site before installing updates this way. Depending on your server configuration, this method can cause issues and you’ll want to be able to revert to a backup easily. 2. Download the latest version of ShiftNav Pro from your Purchase History page 3. In your WordPress Admin Panel, go to Plugins > Add New, and click “Upload” 4. Click “Choose File” and select the ShiftNav Pro zip file you downloaded. 5. Select “Yes” from the “Upgrade existing plugin?” option. 6. Click “Install Now”

View

Configuring a ShiftNav Menu Panel 0

Each ShiftNav Panel, whether it is the Main ShiftNav or a ShiftNav Instance (Pro only), you can configure the individual menu panel through Appearance > ShiftNav > Main ShiftNav Settings or Appearance > ShiftNav > +{Instance ID}

View

Setting the Menu Edge 0

A ShiftNav Panel can be positioned on either the left or right edge of your site. You can set the edge in your panel’s settings Left Edge Right Edge

View