---
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-09-14
lang: en
author: "Aditya Sharma"
description: "A button in the header is the one link that follows a visitor around the whole site. Book a demo, start a trial, get a quote — whatever the next..."
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: 802
---

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

## 

- Header Meta Content widget in The Plus Addons for Elementor adds a call to action button to the navigation header menu inside the Elementor editor, with no separate button widget or custom code needed.
- The Plus Addons for Elementor lets one Header Meta Content item hold up to two independent call-to-action buttons, with Call to Action 1 and Call to Action 2, plus Button Text, Link, Icon Font, Icon Spacing, Icon Size, and Button ID fields.
- Responsive Device settings let the CTA show or hide independently on desktop, tablet, or mobile, and the button appears in the header on every page of the site once enabled.
- SaaS and software sites use a “Start Free Trial” or “Get Demo” button, eCommerce and WooCommerce stores use a persistent “Shop Now” button, and service business sites use a “Book a Call” CTA in the header.

A button in the header is the one link that follows a visitor around the whole site. Book a demo, start a trial, get a quote — whatever the next step is, it stays in view on every page.

The Header Meta Content widget in The Plus Addons for Elementor gives you two of them, **Call to Action 1** and **Call to Action 2**, in the same row as your search icon or cart.

*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 **Call to Action 1** and **Call to Action 2** items need 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**.- **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 Call to Action Item

- Add the **Header Meta Content** widget to your header template.- In **Meta Content**, open the item and set **Select Options** to **Call to Action 1**.

![Select Options set to Call to Action 1 in the Header Meta Content widget](https://theplusaddons.com/wp-content/uploads/2026/09/headermeta-select-cta-select-icon-list.webp)

- Turn on **Display Call To Action** in the **Call To Action 1** section and write your **Button Text**.

![Button Text field in the Call To Action 1 section](https://theplusaddons.com/wp-content/uploads/2026/09/headermeta-cta-options-button-1-text.webp)

- Put the destination in **Link**. Use its options if the link should open in a new tab or carry *nofollow*.

![Link field in the Call To Action 1 section](https://theplusaddons.com/wp-content/uploads/2026/09/headermeta-cta-options-button-1-link.webp)

- Set **Icon Font**, **Icon Position** and, if you need to target the button from CSS or analytics, **Button ID**.

![Button ID field in the Call To Action 1 section](https://theplusaddons.com/wp-content/uploads/2026/09/headermeta-cta-options-button-1-css-id.webp)

Display Call To Action toggle and button settings in the Call To Action 1 tab

> *For a second button, add another **Meta Content** item, set it to **Call to Action 2** and turn on **Display Call To Action** in the **Call To Action 2** section. The two are completely separate.*

## Call To Action Settings

| Setting | What it does | Default |
| ------- | ------------ | ------- |
| Display Call To Action | Turns the button on. Nothing renders without it | Off |
| Button Text | The label on the button | Button 1 / Button 2 |
| Link | Where it goes, plus the new-tab and nofollow options | Empty |
| Icon Font | Font Awesome, Font Awesome 5, Icons Mind, or None | Font Awesome |
| Icon / Icon Library | Which icon | fa fa-chevron-right |
| Icon Position | After or Before the text | After |
| Icon Spacing / Icon Size | Gap between icon and text, and icon size | Empty |
| Button ID | An `id` on the link, for CSS, JavaScript or analytics | Empty |

## How It Behaves

Each button is a single link in the header row, styled from **Style > Call To Action 1** or **Call To Action 2**. Both can sit in the same header.

![Two call-to-action buttons side by side in a site header, one filled and one outlined](https://theplusaddons.com/wp-content/uploads/2026/09/headermeta-result-cta.webp)

- **Icon Font** set to **None** removes the icon and leaves text only.- The **Link** field's options add `target="_blank"` and `rel="nofollow"` to the link.- **Button ID** is written as the link's `id`, so it can be targeted directly.- Each button hides independently per device, through **Hide On Desktop**, **Hide On Tablet** and **Hide On Mobile** on its repeater item. An item hidden on mobile disappeared at a 390 px width while one hidden on tablet stayed.

## Limitations

- Two buttons per widget, and no more. A third needs a second Header Meta Content widget or an ordinary Elementor button.- Each repeater item is one thing. A button and a search icon cannot share an item — each needs its own.- The two buttons are styled separately, in two Style sections. Changing one does not change the other.- The button is a plain link with no ARIA label, so the text you write is the only thing a screen reader announces.- Both slots need Pro. In the free plugin they appear as **Call to Action 1 (Pro)** and **Call to Action 2 (Pro)** and render nothing.

## Troubleshooting

### The button does not appear

Check that the **Meta Content** item is set to **Call to Action 1** (or **2**) and that the matching section's **Display Call To Action** switch is on. Mixing them up — item set to 1, switch turned on under 2 — is the usual cause.

### The second button does not show

It needs its own **Meta Content** item set to **Call to Action 2**, and its own **Display Call To Action** switch in the **Call To Action 2** section.

### The button shows on desktop but not on mobile

Open that repeater item and check the **Responsive Device** switches.

### I want no icon on the button

Set **Icon Font** to **None**. Clearing the icon field alone leaves the default chevron.

## Related Docs

- [Header Meta Content Widget Settings Overview](https://theplusaddons.com/docs/header-meta-content-widget-settings-overview/)- [How to Add Elementor Menu Toggle Button in Header?](https://theplusaddons.com/docs/add-elementor-menu-toggle-button-in-header/)- [How to Add Search Icon to Elementor Navigation Header Menu?](https://theplusaddons.com/docs/add-search-icon-to-elementor-navigation-header-menu/)