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.
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.
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 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.
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
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
