---
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-06-05
lang: en
author: "Aditya Sharma"
description: "Do you want to add an Elementor menu toggle button in the header? A toggle button creates a compact, organized navigation that helps visitors find what they need without cluttering..."
image: https://theplusaddons.com/wp-content/uploads/2023/10/How-to-Add-Elementor-Menu-Toggle-Button-in-Header_-1024x536.jpg
word_count: 402
---

# How to Add Elementor Menu Toggle Button in Header?

## 

- Adds a menu toggle button using the Header Meta Content widget from The Plus Addons for Elementor.
- Creates an off-canvas menu by selecting Extra Toggle Bar in the Meta Content tab.
- Enables the Display Toggle Bar option and customizes styles through the Toggle Style dropdown.

Do you want to add an Elementor menu toggle button in the header? A toggle button creates a compact, organized navigation that helps visitors find what they need without cluttering the visible header area.

The Header Meta Content widget in The Plus Addons for Elementor lets you add a menu toggle button to your Elementor header, launching an off-canvas menu on click.

*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/).*

**Best Used For:**

- Agency and creative sites where a minimal header with a toggle button keeps the design clean- WooCommerce stores where the header needs to stay uncluttered while full navigation stays accessible- Multi-page sites where visitors benefit from an off-canvas panel that slides in from any direction

***Requirement - This widget is a part of The Plus Addons for Elementor, make sure it is installed & activated to enjoy all its powers.***

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

To do this, first create an Elementor template with the content you want to show inside the off-canvas menu.

Name the template something descriptive, such as Toggle Menu, to make it easy to identify later.

Then, add the Header Meta Content widget to the header template and follow the steps -

> *Note: To create the header template, you can use the free *[*Nexter Builder*](https://nexterwp.com/docs/nexter-theme-builder-explained/)* or you can use Elementor Pro if you are already using it.* 

1. In the **Meta Content** tab, open the item and select **Extra Toggle Bar** from the **Select Options** dropdown. Then, adjust the icon spacing from the **Icon Left Space** and **Icon Right Space** sections. From the **Responsive Device** section, control which devices the toggle button appears on.

![header meta content extra toggle bar](https://theplusaddons.com/wp-content/uploads/2023/10/header-meta-content-extra-toggle-bar.png)

2. Go to the **Extra Toggle Bar** tab and enable the **Display Toggle Bar** toggle.

Suggested reading: [How to Create a Sticky Bottom Mobile Menu in Elementor](https://theplusaddons.com/docs/create-a-sticky-bottom-mobile-menu-in-elementor/)

From the **Toggle Style** dropdown, select the icon style for the toggle button, or upload a custom image.

3. From the **Elementor Templates** dropdown, select the template you created for the off-canvas menu content. From the **Open Content Direction** dropdown, choose which direction the off-canvas panel slides in from. From the **Content Width** dropdown, set the width of the panel or select full width.

The toggle icon will now appear in the header. Clicking it opens the off-canvas popup with your template content.

Also, read [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/)