Toggles

Knowledgebase Docs » UberMenu 3
USEFUL? 16
UberMenu 3

UberMenu Control Panel > Main UberMenu Configuration > Responsive & Mobile

Below the responsive breakpoint (960px by default, configurable in the Control Panel), UberMenu collapses and is replaced by a responsive toggle button.

“Responsive Toggle” Setting

Out of the box, UberMenu will automatically inject the Responsive Toggle button directly above the menu markup in your layout. If you’d rather it appear elsewhere, you can disable the “Responsive Toggle” setting, and then use one of the methods described under “Responsive Toggle Placement” below to place the toggle wherever you like within your layout.

Responsive Toggle Content

By default, the toggle button will display the text “Menu”. You can change this to whatever you like in the Responsive & Mobile settings.

Responsive Toggle Placement

This toggle button is added to your theme by default when you integrate UberMenu, but if you prefer you can disable the default toggle and add your own elsewhere. Disable the Responsive Toggle setting and add your toggle via PHP or shortcode:

Shortcode

Base shortcode

Here’s the basic shortcode, that will toggle *all* menus

/* Creates a toggle that will control any UberMenu on the page */
[ubermenu_toggle]
Control a specific menu (Recommended)

To control a specific menu, set the config_id and target attributes

/* Creates a toggle for the 'main' configuration that will control the menu with ID 'ubermenu-main-2-primary' */
[ubermenu_toggle config_id="main" target="ubermenu-main-2-primary"]

Keep in mind that the ID is generated dynamically, depending on your setup, and will be in a format such as ubermenu-{config_id}-{menu_id}-{theme_location_slug}-{instance} to guarantee ID uniqueness. So the easiest way to get this ID is to inspect the markup of your menu and copy it directly. Keep in mind if you change your setup (assigned menu or theme location, for example), this ID will change and will need to be updated in your shortcode.

Setting toggle content

You can pass content to be displayed within the toggle, otherwise it will default to ‘Menu’. Note that the icon is controlled separately from the toggle.

/* Creates a toggle with the label 'Toggle Me!' */
[ubermenu_toggle]Toggle Me![/ubermenu_toggle]
Setting toggle icon

You can set the Font Awesome 5 Solid Icon used by using the icon_class attribute

/* Creates a toggle with the down chevron icon */
[ubermenu_toggle icon_class="chevron-down"]

Setting toggle ID

You can set an ID attribute for the toggle element by using the toggle_id attribute.

PHP

<?php ubermenu_toggle(); ?>

The above code will create a toggle that toggles any UberMenu on the page in the main configuration. If you only have one UberMenu instance, this will work fine. If you have multiple instances and want to toggle an individual one, please see the PHP API