Documentation: ShiftNav

Knowledgebase Docs » ShiftNav

ShiftNav Knowledgebase 19

Use the menu on the left to navigate the Knowledgebase, or search for topics above

Quick Setup 38

This guide gets you up and running as quickly as possibly with minimal configuration. Check out the Configuration section of the guide for full options 1. Download the ShiftNav zip. Upload it to your WordPress installation. 2. Activate the ShiftNav plugin 3. Go to Appearance > Menus and create your menu to be used in ShiftNav. To set ShiftNav-specific settings, hover over the menu item and click the Shift button that appears. 4. Go to Appearance > Menus > Manage Locations and assign your menu to the ShiftNav [Main] Location 5. Go to Appearance > ShiftNav. Click the “Toggle Bar” tab. 6. Set your Toggle Breakpoint (959 is a good starting point) 7. Provide the selector for the menu you want to hide. This is specific to your theme, and often looks like .primary-nav, #primary-menu, .top-nav, .main_menu, etc. For UberMenu 2, the selector is #megaMenu. For UberMenu 3, just check the special Hide UberMenu box. 8. Click Save Changes 9. ShiftNav is now installed and running on your site. You can configure it further in the Appearance > ShiftNav Panel.

View

Shortcodes [Pro] 0

ShiftNav Pro includes several shortcodes for adding custom content to your menu. They can be placed in the Custom Content areas above and below the menu in the ShiftNav Control Panel.

View

Search [Pro] 9

ShiftNav provides a search bar shortcode which you can insert into the Custom Content areas before or after the menu in your ShiftNav menu settings. [shiftnav-search] You can also set the placeholder text with the placeholder attribute [shiftnav-search placeholder=”Enter to search”] By default it is set to “Search…” Search shortcode in the menu panel Searching for a specific post type since v1.5 The search bar is simply a form that submits your search string to the WordPress core search system. The search results are gathered by WordPress, and displayed by your theme. So this shortcode is responsible only for the search form itself, not the results or their display. If you would like to limit the type of posts that will be searched, however, you can do so by setting the post_type attribute in the shortcode. For example, if you only want to search for a custom post type “product”, you could use the shortcode [shiftnav-search post_type=”product”] This restriction will be submitted with the form, and WordPress will then only return posts that are products.

View

Toggles 16

ShiftNav Toggles can be inserted anywhere via PHP, HTML, or Shortcode. To add a toggle, you just need to define its target (the ShiftNav instance ID), and give it some content. The ID for the main ShiftNav instance is shiftnav-main. When you create additional instances in ShiftNav Pro, you create their IDs and they are displayed in the tabs in your settings panel. Instance Toggles [Pro] With ShiftNav Pro, when you add a new instance, ShiftNav will automatically generate and display the code you can use to insert toggles for that ShiftNav instance.

View

Toggles: HTML 9

Creating a toggle in HTML has two basic requirements: 1. It must have the class shiftnav-toggle 2. It must have a data-shiftnav-target attribute set to the ID of the menu that should be toggled upon activation Here’s an example of a toggle for the main ShiftNav This will create a link with the text “Toggle Content” that, when clicked, will toggle the Main ShiftNav open and closed. By default, ShiftNav won’t add any styling to this link, but you can use classes from your theme (button or btn are common) to style the toggle as a button or however you like. Hint: Mobile visibility By default this toggle will appear at all viewport widths. Want it to appear only below the same breakpoint as the main toggle bar? Add the shiftnav-toggle-mobile class to the toggle bar element Note that this visibility can be easily overridden by other CSS on your site, so if it is not working, check that you don’t have other CSS setting this to display:none;

View

Toggles: PHP 5

PHP toggle tags are perfect for adding toggles in your theme templates. To insert a toggle for the main ShiftNav panel, you would use this You can set the content of the toggle with the second parameter. The third parameter takes an array of arguments which can be used to define an ID, element/tag, and additional classes to add to the toggle. For example, the following: would produce this markup: Hint: Mobile visibility By default this toggle will appear at all viewport widths. Want it to appear only below the same breakpoint as the main toggle bar? Add the shiftnav-toggle-mobile class to the toggle bar element Note that this visibility can be easily overridden by other CSS on your site, so if it is not working, check that you don’t have other CSS setting this to display:none;

View

Toggles: Shortcode 3

ShiftNav provides a shiftnav_toggle shortcode which can be used to print a toggle anywhere in your content. The target attribute is the ID of the instance which should be opened. To set an icon (such as the hamburger bars), set the icon attribute If you want to set custom content, you can enter that in the shortcode content area Hint: Mobile visibility By default this toggle will appear at all viewport widths. Want it to appear only below the same breakpoint as the main toggle bar? Add the shiftnav-toggle-mobile class to the toggle bar element Note that this visibility can be easily overridden by other CSS on your site, so if it is not working, check that you don’t have other CSS setting this to display:none; [shiftnav_toggle] Generates a toggle for the specified panel. target Specifies the panel that this toggle controls by ID icon The name of the Font Awesome icon to display. Use bars for the hamburger icon. toggle_id Apply an id attribute to the toggle element class Apply a CSS class to the toggle element el Change the element tag for the toggle. Anchor (a) by default. aria_label Set an aria-label attribute on the toggle {content} Any content placed between opening and closing shortcode tags will be the content of the toggle

View

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.

View