Toggles

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.

Configuring the Responsive Toggle Button

Responsive Toggle

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 “Custom Toggles” 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

Switch your toggle’s location in the layout from “Inline” (wherever the menu itself is integrated in the layout) to “Fixed”, where the toggle will be injected into the footer and then set in a fixed position in the upper right of the screen. You can control the positioning by tweaking this custom CSS if desired:

.ubermenu-responsive-toggle.ubermenu-responsive-toggle-fixed{
    top:80px;
    right:20px;
}

Custom Toggles

The default toggle button is added to your layout just before the menu itself 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.

Keep in mind that if you add a custom toggle, you’ll control it via the function you use and custom styling.

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

UberMenu 3