Add 3 Call to action buttons to header 7.1

Hi, 

Creating a new business website & have it on a business plan. 

We have 3 social media icons on the left hand side of the header navigation bar and would like to add 3 call to action icons on the right hand side.

I can turn on the one button for the right hand side,  but is there anyway of adding 3 icons for buttons instead?

Am running the navigation with a split nav either side of a central logo.

Thanks
Andi

Some solutions to do this

Option 1. Use CSS code to turn last 3 items from Navigation to button style, then next use CSS position absolute to push them to right of footer

Option 2. Use JavaScript code to add 2 buttons to right of header + enable one button

If you share link to your site, we can give code for option 2 (You need to provide button name + button url)

Hi, 

Thanks for your response - Ideally I'm preferring option 2.

3 Buttons: - 

<i class="fa-solid fa-location-dot" style="color: #ffffff;"></i>

<i class="fa-solid fa-envelope" style="color: #ffffff;"></i>

<i class="fa-solid fa-phone" style="color: #ffffff;"></i>

When clicking on each button I'd like the actions to launch the below.

Location - https://maps.app.goo.gl/cPDj68KXYN52zhYE7

Email - hello@innovecom.com

Phone - +441172350000

Website - https://flute-opossum-zdac.squarespace.com/

Password - innovecom

Attached a mockup of what I'm ideally aiming for.

Many thanks

Andi

Hi,

Thanks so much for your quick response, this has worked perfectly.

I just have one more question around this if you don't mind. By turning the CTA button on it's required for the icons to appear, however it obviously still keeps the call us section I had put in - Deleting the text removes it from the screen but still leaves the link & rollover button there if I move the cursor over it.

Is there any way of stopping that happening?

Thanks again

Andi

On 12/5/2023 at 5:02 PM, andi.proact said:

Hi,

Thanks so much for your quick response, this has worked perfectly.

I just have one more question around this if you don't mind. By turning the CTA button on it's required for the icons to appear, however it obviously still keeps the call us section I had put in - Deleting the text removes it from the screen but still leaves the link & rollover button there if I move the cursor over it.

Is there any way of stopping that happening?

Thanks again

Andi

Add this to Website Tools > CUSTOM CSS to remove it

div.header-actions-action a.btn:first-child {
    display: none !important;
}

You absolute legend.

That has done everything I needed.

Thank you so much for your time and help.

Andi