---
title: "How to Add Elementor Menu Toggle Button in Header?"
url: https://theplusaddons.com/docs/add-elementor-menu-toggle-button-in-header/
date: 2023-10-28
modified: 2026-09-14
lang: en
author: "Aditya Sharma"
description: "A header runs out of room quickly once it holds a logo, a menu and a button. A toggle button solves that: one small icon that opens a panel holding..."
image: https://theplusaddons.com/wp-content/uploads/2023/10/How-to-Add-Elementor-Menu-Toggle-Button-in-Header_-1024x536.jpg
word_count: 764
---

# How to Add Elementor Menu Toggle Button in Header?

## 

- Header Meta Content añade Extra Toggle Bar como un elemento Pro en The Plus Addons for Elementor, y el panel usa una plantilla de Elementor elegida desde Elementor Templates.
- El panel se abre al hacer clic, desliza la sección, oscurece el resto de la página y muestra un botón de cierre que también funciona al pulsar el área sombreada.
- Extra Toggle Bar ofrece cinco estilos de icono, con Style 5 para icono o imagen propios, y permite abrir el contenido en Right, Left, Top o Bottom.
- La plantilla debe estar publicada y solo puede haber una por widget; sin plantilla seleccionada el icono aparece pero no hay panel, y en la versión gratuita el elemento renderiza nada.

A header runs out of room quickly once it holds a logo, a menu and a button. A toggle button solves that: one small icon that opens a panel holding a second menu, contact details, a promo or anything else you can build in Elementor.

The Header Meta Content widget in The Plus Addons for Elementor adds one as an **Extra Toggle Bar** item, and the panel's content is simply an Elementor template you pick from a dropdown.

*To check the complete feature overview documentation of The Plus Addons for Elementor Header Meta Content widget, [click here](https://theplusaddons.com/docs/header-meta-content-widget-settings-overview/).*

***Requirement - This part of the widget needs the PRO version of The Plus Addons for Elementor, installed and activated.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-builder/header-builder/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

Table Of Contents

## Before You Start

- **Edition:** **Pro** — the **Extra Toggle Bar** item needs the Pro version. In the free plugin the **Select Options** dropdown labels it **(Pro)**, and turning its **Display** switch on renders nothing.- **Widget to enable:** Header Meta Content, switched on under **The Plus Addons > Widgets**.- **An Elementor template** saved and **published**, holding whatever the panel should show. Build it first — the toggle has nothing to open without one.- **Where to add it:** your header template, so the row shows on every page. The widget's own **Use with Theme Builder** section links to a **Create Header Template** button.- **Two steps, always:** adding an item in **Meta Content** is only half of it. Nothing appears until you also turn on that item's own **Display** switch in its section further down the Content tab.

## Add the Extra Toggle Bar Item

- Build and publish the Elementor template you want inside the panel. Give it a name you will recognise in a dropdown.- Add the **Header Meta Content** widget to your header template.- In **Meta Content**, open the item and set **Select Options** to **Extra Toggle Bar**.

![Select Options set to Extra Toggle Bar in the Header Meta Content widget's Meta Content repeater](https://theplusaddons.com/wp-content/uploads/2026/09/headermeta-select-toggle-select-icon-list.webp)

- Turn on **Display Toggle Bar** in the **Extra Toggle Bar** section.

![Display Toggle Bar switched on in the Extra Toggle Bar section](https://theplusaddons.com/wp-content/uploads/2026/09/headermeta-toggle-options-display-extra-toggle-bar.webp)

- Choose your template in **Elementor Templates**.

![Elementor Templates dropdown in the Extra Toggle Bar section](https://theplusaddons.com/wp-content/uploads/2026/09/headermeta-toggle-options-extra-content-template.webp)

- Set **Open Content Direction** and **Content Width** for the panel.

![Open Content Direction dropdown in the Extra Toggle Bar section](https://theplusaddons.com/wp-content/uploads/2026/09/headermeta-toggle-options-extra-toggle-bar-direction.webp)

Display Toggle Bar toggle and panel settings in the Extra Toggle Bar tab

## Extra Toggle Bar Settings

| Setting | What it does | Default |
| ------- | ------------ | ------- |
| Display Toggle Bar | Turns the toggle on. Nothing renders without it | Off |
| Toggle Style | Five icon designs. **Style 5** lets you supply your own icon or image | Style 1 |
| Custom | With Style 5, whether your own icon or your own image is used | Custom Icon |
| Elementor Templates | The published template the panel shows | Nothing selected |
| Open Content Direction | Right, Left, Top or Bottom | Right |
| Content Width | Custom or Full Width | Custom |
| Custom Content Width | The panel's width, per device | Empty |

## How It Behaves

Clicking the toggle slides the panel in, dims the rest of the page and shows a close button. Clicking the close button or the dimmed area closes it again.

![Off-canvas panel open over a dimmed page, showing the Elementor template assigned to the header toggle button](https://theplusaddons.com/wp-content/uploads/2026/09/headermeta-result-toggle.webp)

The toggle button opening the off-canvas panel live

- **Right** and **Left** give a side panel the width you set. **Top** and **Bottom** give a full-width band that slides down or up.- **Content Width** set to **Full Width** makes a side panel cover the whole viewport width.- The panel holds a complete Elementor template, so it can contain any widget, not only a menu.- Each **Extra Toggle Bar** item shows the same template, because **Elementor Templates** is a widget setting rather than a per-item one.

## Limitations

- With no template chosen in **Elementor Templates**, the widget outputs the icon but no panel at all, so clicking does nothing.- One template per widget. A second, different panel needs a second Header Meta Content widget.- The template must be **published**. A draft shows an *Unauthorized Access* notice inside the panel instead of your content.- The toggle is rendered as a plain `div` with a click handler rather than a button, so it is not focusable with the keyboard.- The whole item, including **Toggle Style**, needs Pro. In the free plugin the section and its **Display Toggle Bar** switch are still there and render nothing.

## Troubleshooting

### The toggle icon shows but clicking it does nothing

Nothing is selected in **Elementor Templates**. Without a template the widget writes no panel markup, so there is nothing to open.

### The panel says Unauthorized Access

The template you picked is not published. Open it and publish it.

### The panel is too narrow for the template

Raise **Custom Content Width**, or set **Content Width** to **Full Width**. Check it at the mobile breakpoint separately — the width is a per-device slider.

### Nothing appears in the free plugin

**Extra Toggle Bar** is a Pro item. The free plugin shows it in the dropdown as **Extra Toggle Bar (Pro)** and renders nothing for it.

## Related Docs

- [Header Meta Content Widget Settings Overview](https://theplusaddons.com/docs/header-meta-content-widget-settings-overview/)- [How to Add a Call To Action Button to Navigation Header Menu?](https://theplusaddons.com/docs/add-a-call-to-action-button-to-navigation-header-menu/)- [How to Add WooCommerce Mini Cart in Elementor Navigation Header Menu?](https://theplusaddons.com/docs/add-woocommerce-mini-cart-in-elementor-navigation-header-menu/)

## Frequently Asked Questions

**Q: What do I need before adding a menu toggle button in the header?**
A: The key requirement is the Pro version of The Plus Addons for Elementor, because Extra Toggle Bar is a Pro item. You also need the Header Meta Content widget enabled under The Plus Addons > Widgets, plus a published Elementor template for the panel content. That template matters because the toggle has nothing to open without it. In practice, build the panel content first, then place the widget in your header template so it can appear across the site.

**Q: Why does the toggle icon show but nothing opens when I click it?**
A: That usually means no template is selected in Elementor Templates. The widget still outputs the icon, but it does not generate panel markup without a published template to load. The practical fix is to pick a saved Elementor template and publish it first, because the toggle is only the trigger and the template is what actually fills the panel.

**Q: Can the toggle panel show more than just a menu?**
A: The panel can hold a complete Elementor template, so it is not limited to navigation. The page says it can contain any widget, including a second menu, contact details, or a promo block. That makes it useful when header space is tight and you want one icon to reveal extra content without crowding the main header row.

**Q: What is the best way to control how wide the off-canvas panel looks?**
A: Use Content Width and Custom Content Width together, because they control whether the panel behaves like a side drawer or a full-width band. Right and Left create a side panel with your chosen width, while Top and Bottom create a full-width strip that slides down or up. If the template feels cramped, raise Custom Content Width or switch to Full Width, and check mobile separately because width is set per device.

**Q: Why does the panel say Unauthorized Access?**
A: That message points to an unpublished template. The toggle opens an Elementor template from the dropdown, and if that template is still a draft, The Plus Addons for Elementor shows Unauthorized Access inside the panel instead of your content. Publishing the template is important here because the widget needs an accessible live version to render anything useful.

**Q: Is there another way to add extra header content besides this toggle bar?**
A: The related docs point to two other header options: [How to Add a Call To Action Button to Navigation Header Menu?](https://theplusaddons.com/docs/add-a-call-to-action-button-to-navigation-header-menu/) and [How to Add WooCommerce Mini Cart in Elementor Navigation Header Menu?](https://theplusaddons.com/docs/add-woocommerce-mini-cart-in-elementor-navigation-header-menu/). Those are better fits when you want a single action button or a cart in the menu area instead of an off-canvas panel built from an Elementor template.