With ShiftNav Pro, you can add as many ShiftNav panels as you like. Each panel can have its own menu and custom content, and can be controlled independently via the ShiftNav Control Panel. Each ShiftNav instance is given its own tab in the ShiftNav Settings Panel. ShiftNav instance settings tabs are designated with the + prefix.
ViewDocumentation: ShiftNav
Setting the menu for a ShiftNav instance [Pro] 1
While a special ShiftNav [Main] theme location is created for the main ShiftNav Instance, this is not the case for secondary instances. For a secondary ShiftNav Instance, the menu is assigned via the special settings panel for that instance. You can assign a menu either directly, or via a theme location. Assigning a menu directly To assign a specific menu you have created in Appearance > Menus to a ShiftNav instance: 1. Go to Appearance > ShiftNav 2. Click the +{instance_name} tab for your ShiftNav instance 3. Select the menu you wish to display under Display Menu and save the changes. 4. Applying this setting will override the Theme Location setting. Assigning a menu via a theme location To assign a menu via a theme location to a ShiftNav instance: 1. Go to Appearance > ShiftNav 2. Click the +{instance_name} tab for your ShiftNav instance 3. Select the theme location you wish to display under Theme Location and save the changes. 4. If you have not already done so, visit Appearance > Menus > Manage Locations and assign a menu to your chosen theme location. If you set the Display Menu setting, this setting will be ignored. ShiftNav does not automatically create new Theme Locations for each ShiftNav instance. If you wish to create new theme locations without adding PHP code, you can use the free Menu Swapper plugin
ViewAdding a ShiftNav Instance [Pro] 1
To add a new ShiftNav panel, go to Appearance > ShiftNav. 1. Click the green + Add ShiftNav Instance button in the upper right corner. 2. Give your new instance an ID. IDs should only include letters, hyphens, and underscores. If you include invalid characters, your ID will be automatically sanitized. 3. Click Create Instance. Your new instance will be created. To see the instance, click the Refresh Page button. If you have changes that you need to save before refreshing, click close and save your changes. 4. When the page is refreshed, you will see a new tab appear, labeled +{your_instance_name} Click the tab to view the options for your new panel. 5. Assign a menu to use for this panel. Either assign a menu directly via Display Menu or via a Theme Location. Both are set in the image only for illustrative purposes; in practice, setting both would be pointless as only one can work at a time, and Display Menu takes precedence. 6. Add a toggle to your theme template or page content to provide users a way to open and close the panel. The appropriate toggle code for that instance is provided at the top of the tab. 7. Configure the remaining settings to your liking
ViewToggling Secondary Instances [Pro] 0
The main toggle bar that appears in ShiftNav will always toggle the main ShiftNav instance. To toggle a secondary instance, you can use the generated toggles in the ShiftNav instance panel and insert them in your theme templates or page content. For more information, see the Toggles section of the Knowledgebase.
ViewDisable ShiftNav on a specific page (or any custom condition) 18
ShiftNav is added to your site via the wp_footer hook, so removing it is as simple as unhooking that action. This is the PHP that will remove the main ShiftNav instance: To target a specific page, you’ll generally want to test for that page conditionally. In the following example, ShiftNav would be removed from page 1380: You can tailor the condition to your specific needs. Here’s a list of WordPress Conditional Tags Generally, this code works best in a child theme’s functions.php file Removing styles and scripts To remove ShiftNav’s CSS and JS assets, you can use
ViewHow can I hide the “Loading ShiftNav…” / “ShiftNav is Waiting to Load…” message 8
ShiftNav introduced a javascript fallback in v1.4, which allows the plugin to recover in most cases even when other scripts on the site are malfunctioning. Since this has worked very well, this message has now been removed from the plugin in v1.5 When the page loads, you may see a flash of the message “Loading ShiftNav…” or “ShiftNav is Waiting to Load…” This message is only visible to logged in administrators. Your end users will never see it This message serves an important purpose. If there is a javascript error on your page, the message will remain, alerting you to this fact. Hovering over the message reveals more information: If the message disappears, then ShiftNav was able to initialize. If you really don’t want to see this message, you can add this custom CSS to hide it: If the message does not disappear, it means you either have a javascript error that prevents ShiftNav from loading, or else ShiftNav’s javascript was not run at all – which would indicate that either the resource is not being served properly, or your site is missing the wp_footer() hook and therefore not requesting the script at all.
ViewJavascript API 13
ShiftNav provides a simple javascript API for opening and closing the menu. Pass the ID of the ShiftNav panel to control it. Functions Open the ShiftNav Panel Close the ShiftNav Panel Events shiftnav-loaded Triggered on the .shiftnav element when it has finished initializing shiftnav-open Triggered on a .shiftnav panel when it is opened shiftnav-close Triggered on a .shiftnav panel when it is closed shiftnav-open-submenu Triggered on a parent item (li) when its submenu is opened shiftnav-close-submenu Triggered on a parent item (li) when its submenu is closed
ViewChange the transition / animation speed 0
ShiftNav uses CSS3 transitions, so it is easy to change the transition speed with CSS
ViewCustomize 3
NEVER edit ShiftNav’s core files. Follow the best practices outlined here to customize ShiftNav in a way that will be preserved when you update Customizer As of ShiftNav 1.4, Pro customers can customize their menu styles using the Customizer CSS Tweaks For minor custom CSS tweaks, you can add them via the ShiftNav Control Panel. Custom CSS Stylesheet For more significant custom CSS, you can use a custom stylesheet.
ViewCSS Tweaks 1
Control Panel > General Settings > CSS Tweaks If you want add a few CSS tweaks to your site, you can do so right from the ShiftNav Control Panel. (For significant amounts of CSS, it’s better to use the custom.css stylesheet).
View