Toggle Button for Desktop – Header Builder Element

The Toggle Button lets you tuck extra content — like a menu, a search bar, a button, or social icons — behind a small button in your desktop header. When a visitor clicks it, that content slides out in an ‘off-canvas’ panel, similar to how the hamburger menu works on mobile.

This is a great option when your header feels crowded, but you still want quick access to things like a search box, secondary menu, or contact button.

When a user clicks on the toggle button, it brings an off-canvas window on the screen with all the content you added inside.

This content is blocked because it requires Vimeo cookies.

Accept & Load

As it needs a small space in the header, this is a great way to display content in the header.

This is a premium feature. You’ll need Astra Pro (version 3.3 or later) activated on your site, along with the Astra theme. Before version 3.3, adding a toggle button on desktop required custom code — with this element, no code is needed.

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:

This content is blocked because it requires YouTube cookies.

Accept & Load

If you prefer a written version, let us dive in!

How To Add Toggle Button for Desktop

As this is a premium feature, before you start, make sure you have:

• The Astra theme installed and active
• The Astra Pro plugin installed, activated, and updated to version 3.3 or later
• A valid Astra Pro license (needed for updates and support).

Step 1: Add the Toggle Button to Your Header

1. Go to Appearance → Customize → Header (or open the Header Builder from wherever you usually access it).
2. Click on the header section where you’d like the toggle button to appear (left, center, or right).
3. From the list of elements, select Toggle Button.

Step 2: Choose What Appears in the Off-Canvas Panel
Once you’ve added the Toggle Button, an Off-Canvas section will automatically appear in the Header Builder. This is where you decide what content shows up when someone clicks the button.

1. Click on the Off-Canvas section.
2. A list of available elements will open — choose any of the following: Buttons, Search, Widgets, HTML, Social Icons, Off-Canvas Menu, and more.

Selected elements are added automatically to the panel. To customize any of them (colors, text, spacing, etc.), just click on that element and its settings will open in the Customizer.”

Important — Adding a Menu:
If you want a navigation menu inside the off-canvas panel, use the Off-Canvas Menu element specifically. The regular Primary and Secondary Menu elements will not display correctly inside this panel.

By default, the Off-Canvas Menu shows every published page on your site (like WordPress’s default menu behavior). If you’d like it to show a specific set of links instead, you’ll need to either create a new menu or assign one of your existing menus to it.”

If you are not sure how to create and assign off-canvas menu, here are the steps –

1. Click on the Off-Canvas Menu element.
2. In the Customizer panel, click Configure Menu from Here.
3. Under the Off-Canvas Menu dropdown, select the menu you want to use.
4. Don’t have one yet? Click Create New Menu and it will automatically be assigned as your off-canvas menu.

This content is blocked because it requires Vimeo cookies.

Accept & Load

Important — Adding a Menu:
If you want a navigation menu inside the off-canvas panel, use the Off-Canvas Menu element specifically. The regular Primary and Secondary Menu elements will not display correctly inside this panel.

By default, the Off-Canvas Menu shows every published page on your site (like WordPress’s default menu behavior). If you’d like it to show a specific set of links instead, you’ll need to either create a new menu or assign one of your existing menus to it.”

Step 3: Design the Toggle Button
With your off-canvas content in place, you can now style the button itself.

Its settings will open in the Customizer.

Click directly on the toggle button in the Header Builder.

To customize the toggle button, click on the button in the header builder and all design options will promptly open in the customizer.

Under the General tab, you can set:

Option	What it does
Icon	Choose from three built-in icon styles
Toggle Button Style	Pick from three pre-built button designs
Menu Label	Add a text label next to the icon (optional)

Under the Design tab, you can adjust: Size, Color, Margin/spacing”

Step 4: Design the Off-Canvas Panel
Finally, style the panel that appears when the button is clicked.

Its options will open in the Customizer.

Click the gear/settings icon next to the Off-Canvas section in the Header Builder.

Under the General tab, you can set the panel type and its position (left, right, etc.).
Under the Design tab, you can set colors and spacing.

Desktop, tablet, and mobile are independent. If you switch device previews in the Customizer, you’ll notice the off-canvas section still appears — but it does not automatically carry over your desktop settings. Each device (desktop, tablet, mobile) has its own separate toggle/off-canvas setup, so you can design a completely different experience for each one if you’d like.

Still Need a Hand?
If something isn’t working as expected, our support team is happy to take a closer look — just reach out via Contact Support with your site URL and a quick description of what you’re seeing.