[rank_math_breadcrumb]

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

Updated on June 24, 2024 by
Table Of Content

Do you want to add a call to action button to the navigation header menu in Elementor? If you want users to take a certain action then adding a call to action button in the header can be a great option this way you can show the CTA throughout the website.

With the Header Meta Content widget from The Plus Addons for Elementor, you can easily add a call to action button to the navigation header menu.

To check the complete feature overview documentation of The Plus Addons for Elementor Header Meta Content widget, click here.

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

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 or you can use Elementor Pro if you are already using it. 

1. In the Meta Content tab, you’ll find an item click to open it, then select Call to Action 1 from the Select Options dropdown.

header meta content call to action

Then, do the necessary icon spacing adjustments from the Icon Left Space and Icon Right Space sections.

From the Responsive Device section, you can manage the visibility of the item for different devices if needed.

2. Then go to the Call To Action 1 tab and enable the Display Call To Action toggle.

header meta content call to action settings

In the Button Text field, you have to add the button text.

Then, in the Link field, you have to add the URL.

From the Icon Font dropdown, you can add an icon or custom image to the button or you can remove them as well.

From the Icon Spacing and Icon Size sliders, you can manage the icon spacing and size respectively.

Then in the Button ID field, you can add an ID to the button to target it with custom JaveScript or CSS.

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

Now you’ll be able to see a call to action button in the header.

header meta content call to action demo
OR
Get Free 25+ Secrets to Make Elementor Website Faster [Guaranteed Results]



    Subscribe to our YouTube Channel for Elementor Tutorials
    New Video Every Week!
    Automatically Convert Figma Designs to 100% Editable Elementor Website
    X