Configuring Toggle Bar Display

Knowledgebase Docs » ShiftNav » Configuration
USEFUL? 16

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 960

WidthDevice
960Tablets
767Mobile Devices (phones)

Most users will want to set the Toggle Breakpoint to 960 or 767

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 nav or 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.

Hiding UberMenu

UberMenu 2

If you are using UberMenu 2, the appropriate selector will be #megaMenu.

UberMenu 3

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:

<img src="http://yoursite.com/yourimg.jpg"/>

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