Toggles

Knowledgebase Docs » ShiftNav » Toggles

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