How to add a toggle button in the header with the Ex2 theme?

Toggle button for desktop display: Header builder element

The toggle button is an attractive way to display content such as a menu, button, search, etc. in the header of your site’s display to
desktops. It is specially designed for computer screens and works in the same way as the “hamburger” button available for mobile display.

When a user clicks the toggle button, it displays an off-screen window with all the content you have added inside. As it requires little space, it is a great way to display the content in the header.

This beneficial element of the header builder is an Ex2-Theme Pro feature available since version 3.3. Before this version, you had to use a custom code to bring a toggle button, but this is no longer necessary.

You can now easily display off-canvas content on the desktop and completely customize it with the new Toggle Button element.

How to add a toggle button for display on desktops

As this is a premium feature, make sure your Ex2-Theme Pro theme is updated and enabled. Then follow the steps below:

Step 1: Open the header builder and click the section where you want to add a toggle button. From the list of items, choose “Toggle Button”.
Step 2: You can now choose the content, that is, the items to be displayed in the window that will appear when users click the toggle button.

You will then see the "Off-Canvas Menu" section in the header builder as soon as you add the toggle button. Click this tab to access the off-screen options, where a
list of items is available.

Select the required items from this list and they will be automatically added to the out of scope section. You can add various items such as buttons, a search bar, a link to your social media accounts, widgets, HTML code elements, your out-of-scope menu, etc.

To configure these items, simply click on them to access all customization options.

Note:

To add a menu in the out-of-scope section, use the "Off-Canvas Menu" item in the list. The main and secondary menus will not work in the off-canvas section.

By default, the off-canvas menu will display all pages of your website, just like the WordPress default menu. You will need to create a dedicated out-of-field menu or assign another menu
existing as an out-of-field menu.

If you don’t know how to create and assign an off-canvas menu, here are the steps:

Click the out-of-field menu
In the customizer, click on "Configure menu from here"
From the "Off-Canvas Menu" drop-down list, select the required menu. If the desired menu is not in the list, you can "Create a new menu" and set it as an out-of-scope.

Step 3: Once you have added all the required content in the Off-Canvas section, you can design the toggle button as you choose. To customize it, click the button in the header builder and all design options will open in the customizer.

You can then define the following elements:

Icons: Choose one of three different templates that are presented to you
Toggle Button Style: Choose one of the three preset styles for the button
Menu Label: Used to add a label for the menu button.

Click the Design tab to set the size, color and margin of the toggle button.

Step 4: You can customize the out-of-canvas window and define its layout and colors.

To do this, click the gear icon for Off-Canvas, and the options will open in the customizer. Under the General tab, you can set the position type and alignment, while under the Design tab, you can set the colors and spacing.

Please note:

If you switch to tablet or mobile display in the customizer, you’ll see an off-screen section. Note that the offscreen section with the toggle button for display on a desktop, tablet or mobile devices works separately.

This allows you to design different toggle menus on different devices. Off-screen display for computers will not be automatically inherited on tablets or mobile devices and vice versa.

Updated on: 27/03/2023