Toggles: Shortcode

Knowledgebase Docs » ShiftNav » Shortcodes
Knowledgebase Docs » ShiftNav » Toggles
USEFUL? 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.

[shiftnav_toggle target="shiftnav-main"]

To set an icon (such as the hamburger bars), set the icon attribute

[shiftnav_toggle target="shiftnav-main" icon="bars"]

If you want to set custom content, you can enter that in the shortcode content area

[shiftnav_toggle target="shiftnav-main"] Open Sesame [/shiftnav_toggle]

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

[shiftnav_toggle target="shiftnav-main" class="shiftnav-toggle-mobile"] Open Sesame [/shiftnav_toggle]

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