Toggle button is an attractive way to display content like menu, button, search, etc. in the header on the desktop. It is specially designed for desktop screens and it works similar to the mobile hamburger button.
When user clicks on the toggle button, it brings an off-canvas window on the screen with all content you added inside.
As it needs small space in header it is great way to display content in header.
This beneficial Header Builder element is a premium Astra feature and available with Astra Pro version 3.3. Before this version, you are 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 new Toggle Button element.
Here is video that explain how to use this element –
If you prefer a written version, let’s dive in –
How To Add Toggle Button for Desktop
As this is a premium feature, make sure to have 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 toggle button.
You will observe off-canvas section in header builder as soon as you add toggle button.
Click on off-canvas section and a list of elements will open up.
Choose required elements from this list and they will be automatically added to the off-canvas section. You can add various elements like button, search, widget, HTML, social, 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/assign off-canvas menu, here are the steps –
- Click on Off-Canvas Menu
- In the customizer, click on ‘Configure Menu from Here’
- From the ‘Off-Canvas Menu’ dropdown, select a 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 off-canvas section, you can design toggle button as per your choice.
To customize toggle button, click on the button in header builder and all designing options will open in customizer.
You can set,
- 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, size, color, margin for the toggle button.
Step 4: You can customize the off-canvas window and set layout, colors for it. To do so, click on the gear icon for Off-Canvas and options will open up in the customizer.
Under General tab you can set type, position alignment while under Design tab you can set 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 desktop, on a tablet device, and on the mobile devices works separately. This lets you design different toggle menus on different devices. Off-canvas from desktop will not be automatically inherited on tablet or mobile and vice versa.