The toggle bar is the bar that sits at the very top of your site and toggles the menu open and closed when clicked.
Toggle Bar Settings Tab
The toggle bar can be configured through the Toggle Bar settings tab located in Appearance > ShiftNav > Toggle Bar
Displaying the toggle bar only on small screens
The Toggle Breakpoint is the point at which you want to display your mobile menu instead of your desktop menu.
Out of the box, the toggle bar will always be visible. However, for most users you will want the bar to only display on mobile devices. You can change the Toggle Breakpoint setting to only display the toggle bar below certain widths.
Device widths vary widely, but a good starting point is
|767||Mobile Devices (phones)|
Most users will want to set the Toggle Breakpoint to
Hiding the theme’s menu
To hide the theme’s menu, you’ll need to find the appropriate class or ID to hide. The easiest way to do this is to use the Chrome Developer Tools – right click on the theme’s menu and click “Inspect Element”. Look up the DOM tree for the
div that is wrapping your menu’s topmost
ul, and use the ID or class from that element to hide the menu.
If you need to hide multiple menus, you can comma-separate their selectors. For example,
.top-menu, #main-menu. This works just like a normal CSS selector, and that is how this setting will be used by the plugin to hide the targeted elements.
If you are using UberMenu 2, the appropriate selector will be
To hide all UberMenus in UberMenu 3, you can check the Hide UberMenu box in the ShiftNav Control Panel.
For previous versions which do not have the Hide UberMenu setting, you can use the selector
.ubermenu, .ubermenu-responsive-toggle to hide all UberMenus.
If you only want to hide a specific menu, you can find the ID of that menu and use it in the selector setting above to target just that individual menu.
Setting the Content of the Toggle Bar
Out of the box, the Toggle Content will be set to the shortcode
[shift_toggle_title], which will display the name of your site. You can place any text, HTML, or shortcode that you like in the Toggle Content box.
For example, to add an image to the Toggle Bar, just upload your image via the WordPress Media Library, then enter an img HTML tag into the Toggle Content:
More details on Adding a logo
Setting the Color and Size of the Toggle Bar
The Toggle Bar Tab also includes settings to allow you to change the background color, text color, and font size of the Toggle Bar