---
title: "How to Add a Call To Action Button to Navigation Header Menu?"
url: https://theplusaddons.com/docs/add-a-call-to-action-button-to-navigation-header-menu/
date: 2023-10-28
modified: 2026-06-05
lang: en
author: "Aditya Sharma"
description: "Do you want to add a call to action button to the navigation header menu in Elementor? A CTA button in the header gives visitors a clear next step on..."
image: https://theplusaddons.com/wp-content/uploads/2023/10/How-to-Add-a-Call-To-Action-Button-to-Navigation-Header-Menu_-1024x536.jpg
word_count: 403
---

# How to Add a Call To Action Button to Navigation Header Menu?

## 

- Adds a call to action button to the navigation header menu using the Header Meta Content widget from The Plus Addons for Elementor.
- Enables the Display Call To Action toggle in the Call To Action 1 tab to customize button text and URL.
- Utilizes Nexter Builder or Elementor Pro to create the header template for implementing the call to action button.

Do you want to add a call to action button to the navigation header menu in Elementor? A CTA button in the header gives visitors a clear next step on every page, making it more likely they convert.

The Header Meta Content widget in The Plus Addons for Elementor lets you add a call to action button to the navigation header menu directly in the Elementor editor.

*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:**

- SaaS and software sites where a “Start Free Trial” or “Get Demo” button drives sign-ups from every page- eCommerce and WooCommerce stores where a persistent “Shop Now” button keeps conversion visible sitewide- Service business sites where a “Book a Call” CTA in the header generates consistent lead inquiries

***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, 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 **Call to Action 1** from the **Select Options** dropdown. Adjust the icon spacing from the **Icon Left Space** and **Icon Right Space** sections. From the **Responsive Device** section, control the visibility of the button on different devices.

![header meta content call to action](https://theplusaddons.com/wp-content/uploads/2023/10/header-meta-content-call-to-action.png)

2. Go to the **Call To Action 1** tab and enable the **Display Call To Action** toggle.

Suggested reading: [how to change button text on hover in Elementor](https://theplusaddons.com/docs/button-text-on-hover-in-elementor/).

In the **Button Text** field, add the label for the CTA button.

In the **Link** field, add the destination URL.

From the **Icon Font** dropdown, add an icon or custom image to the button, or remove them if not needed.

Use the **Icon Spacing** and **Icon Size** sliders to adjust the spacing and size of the icon.

In the **Button ID** field, add an ID to target the button with custom JavaScript or CSS.

> *Note: With the ****Call to Action 2**** option you can add a second call to action button as well.*

The call to action button will now appear in the header on every page of the site.

![header meta content call to action demo](https://theplusaddons.com/wp-content/uploads/2023/10/header-meta-content-call-to-action-demo.png)

Also, read [how to add Elementor menu toggle button in header](https://theplusaddons.com/docs/add-elementor-menu-toggle-button-in-header/).