Overview
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
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
Toggle Breakpoint
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
| Width | Device |
|---|---|
| 960 | Tablets |
| 767 | Mobile 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
