The toggle button is an attractive way to display content like menu, button, search, etc. in the header on the desktop view. It is specially designed for desktop screens and it works similar to the mobile hamburger button.
When a user clicks on the toggle button, it brings an off-canvas window on the screen with all content you added inside.
As it needs a small space in the header, this is a great way to display content in the header.
This beneficial Header Builder element is a premium Astra feature and available since Astra Pro version 3.3. Before this version, you were required to use custom code to bring a toggle button on the desktop. But not anymore!
Now you can easily display off-canvas content on desktop and customize it completely with the new Toggle Button element.
Here is a video that explains how to use this element:
If you prefer a written version, let us dive in!
How To Add Toggle Button for Desktop
As this is a premium feature, make sure to have the Astra Pro plugin updated and activated. Follow the below steps:
Step 1: Open Header Builder and click on a section where you wish to add a toggle button. From the element list, choose Toggle Button.
Step 2: Now you can choose content i.e. elements to display inside a window that appears when users click on the toggle button.
You will observe the off-canvas section in the header builder as soon as you add the toggle button.
Click on the off-canvas section and a list of elements will open up.
Choose the required elements from this list and they will be automatically added to the off-canvas section. You can add various elements such as buttons, search, widgets, HTML, social icons, the off-canvas menu, and so on.
To customize these elements simply click on them and all customization options will open up in the customizer.
Note:
To add a menu inside the off-canvas section, use the Off-Canvas Menu element from the list. The primary and Secondary Menu will not work inside the off-canvas section.
By default, the off-canvas menu will display all pages on your website just like the default WordPress menu. You would need to create a dedicated off-canvas menu or assign any existing menu as an off-canvas menu.
If you are not sure how to create and assign off-canvas menu, here are the steps –
- Click on the Off-Canvas Menu
- In the customizer, click on ‘Configure Menu from Here’
- From the ‘Off-Canvas Menu’ dropdown, select the required menu. If the required menu is not in the list you can even ‘Create New Menu’ and assign it as off-canvas.
Step 3: Once you add all required content inside the off-canvas section, you can design the toggle button as per your choice.
To customize the toggle button, click on the button in the header builder and all design options will promptly open in the customizer.
Once there, you can set the following:
- Icons – Choose from three different designs
- Toggle Button Style – Choose from three pre-built styles for button
- Menu Label – You can add a label for the menu button here.
Click on the Design tab to set the size, color, margin for the toggle button.
Step 4: You can customize the off-canvas window and set the layout and colors for it. To do so, click on the gear icon for Off-Canvas, and the options will open up in the customizer.
Under the General tab you can set the type, and position alignment, while under Design tab you can set the colors and spacing.
Note:
If you switch to tablet or mobile devices in the customizer, you will observe an off-canvas section. Note that the off-canvas section with the toggle button on a desktop, on a tablet device, or on mobile devices works separately. This allows you to design different toggle menus on different devices. Off-canvas from desktop will not be automatically inherited on a tablet or mobile devices and vice-versa.