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.

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.

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 […]

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}

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

Each ShiftNav panel can have its skin set independently. To choose your skin, go to the panel’s settings panel in Appearance > ShiftNav