Toggles: Shortcode

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;


Generates a toggle for the specified panel.

Specifies the panel that this toggle controls by ID
The name of the Font Awesome icon to display. Use bars for the hamburger icon.
Apply an id attribute to the toggle element
Apply a CSS class to the toggle element
Change the element tag for the toggle. Anchor (a) by default.
Set an aria-label attribute on the toggle
Any content placed between opening and closing shortcode tags will be the content of the toggle

On this page