How to add a call to action button in main navigation? (Hyde Template)

Fix works on desktop and mobile! Only one button appears on top navigation.

Pleased to have the button operational today.

Thank you!!

Tuanphan, thank you for sharing your code for navigation action button in the form. The action button apply to drop down menu.  I need to remove action button from drop down menu. I need action button only in navigation. Thank you for your help. The file is attached. - Lyubov

.main-nav li:last-child a {    background: #17308c;    color: #fff !important;    padding: 6px 16px !important;    border-radius: 15px; }

5 hours ago, lstrauss831 said:

Tuanphan, thank you for sharing your code for navigation in the form. The action button apply to drop down menu. What I should change in a code?  I need to remove action button from drop down menu. I need action button only in navigation. Thank you for your help. The file is attached. - Lyubov

.main-nav li:last-child a {    background: #17308c;    color: #fff !important;    padding: 6px 16px !important;    border-radius: 15px; }

change class to

.main-nav>li:last-child a

On 10/12/2020 at 6:21 PM, tuanphan said:

change class to

.main-nav>li:last-child a

I did change it. Action button was removed from navigation. I need to keep action button DONATE. 

.main-nav>li:last-child a {
   background: #17308c;
   color: #fff !important;
   padding: 6px 16px !important;
   border-radius: 15px;}

How to make this work for York family, Harris template? 

About to redesign this site: https://fertilityalliance.com/

I want the button background to be white with a navy border. 

On 11/18/2020 at 10:54 PM, nicolettely said:

How to make this work for York family, Harris template? 

About to redesign this site: https://fertilityalliance.com/

I want the button background to be white with a navy border. 

Add to Home > Design > Custom CSS

.nav-item.external:last-child a {
    background: white;
    border: 1px solid navy;
    display: inline-block;
    padding: 5px;
}
.nav-item.external:last-child a span {
    padding: 0;
}

Hi @tuanphan does the same code apply to the Brine template ?

I'm using the version 7.0 

Cheers!

14 hours ago, damish said:

Hi @tuanphan does the same code apply to the Brine template ?

I'm using the version 7.0 

Cheers!

I don't sure, if you share site url, I can tweak the code

Sure mate, here's my homepage:

www.casamiainterior.com

I used the code below, but I don't know how to change the color inside the "pill button".

I don't want a black outline, but a solid black button with the text in white:

.Header-nav.Header-nav--secondary .Header-nav-inner > a:last-of-type, .Mobile-overlay-nav.Mobile-overlay-nav--secondary > a:last-of-type {
   border: 2px solid black;
   padding: 10px 30px;
   border-radius: 300px;
 }

On 12/8/2020 at 7:51 AM, tuanphan said:

I don't sure, if you share site url, I can tweak the code

Hi @tuanphan our URL is www.casamiainterior.com

In a post above I explained what I want to do. Thanks for your help!

5 hours ago, damish said:

Hi @tuanphan our URL is www.casamiainterior.com

In a post above I explained what I want to do. Thanks for your help!

Use this CSS

div.Header-nav-inner [href*="tel"] {
    background: #000;
    color: white !important;
}

18 hours ago, tuanphan said:

Use this CSS

div.Header-nav-inner [href*="tel"] {
    background: #000;
    color: white !important;
}

 

Thanks @tuanphan it works just fine, I had to tweak the code a little top make the button work on mobile as well, and add a padding as well. Appreciate your help mate!

On 12/10/2020 at 1:34 PM, damish said:

Thanks @tuanphan it works just fine, I had to tweak the code a little top make the button work on mobile as well, and add a padding as well. Appreciate your help mate!

 

I see your site has some problems. If you need to fix, we can give the code

1. (Mobile) Some pages have very long content. You can consider adding a back to top button.

2. (Tablet) Follow us and get rewarded columns is a bit narrow.

3. (Tablet) A lot of large white spaces on the homepage

And how do you change to the font family of your preferance? THANK YOU SO MUCH, Beaver Hero & Beatriz you 've been silently my squarespace saviors! x Maria

20 hours ago, stemajourneys said:

And how do you change to the font family of your preferance? THANK YOU SO MUCH, Beaver Hero & Beatriz you 've been silently my squarespace saviors! x Maria

Can you share link to your site?

On 9/29/2019 at 11:56 PM, tuanphan said:

With Avenue Template, use this code

.main-nav li:last-child a {
   background: #000;
   color: #fff !important;
   padding: 10px 20px !important;
   border-radius: 20px;
}

 

 

thanks so much this code worked for me also (om template). My issue is that i'm also getting the call to action button in the drop-down menus in navigation. Is it possible to edit the code so that it is only in the main primary navigation and not the drop down? thanks in advance x 

19 hours ago, sophiehellyer said:

thanks so much this code worked for me also (om template). My issue is that i'm also getting the call to action button in the drop-down menus in navigation. Is it possible to edit the code so that it is only in the main primary navigation and not the drop down? thanks in advance x 

Use this code

.main-nav>ul>li:last-child a {
    background: #000;
    color: #fff !important;
    padding: 10px 20px !important;
    border-radius: 20px;
}

On 5/8/2017 at 4:26 PM, beatrizc said:

Hi,

You can try this. It targets the last item in your menu on both desktop and mobile:/storage/temp/6012-screen-shot-2017-05-08-at-62211-pm.png

.Header-nav.Header-nav--primary .Header-nav-inner > a:last-of-type, .Mobile-overlay-nav.Mobile-overlay-nav--primary > a:last-of-type {
 border: 2px solid white;
 padding: 10px 30px;
 border-radius: 300px;
}

 

 

If you want to target only desktop, use this part:

.Header-nav.Header-nav--primary .Header-nav-inner > a:last-of-type { 
 border: 2px solid white;
 padding: 10px 30px;
 border-radius: 300px;
}

 

 

For only mobile, use this:

.Mobile-overlay-nav.Mobile-overlay-nav--primary > a:last-of-type {
     border: 2px solid white;
     padding: 10px 30px;
     border-radius: 300px;
   }

 

 

You might want to alter the height of your header so the button fits properly.Also, you'll have to modify the width of the button in mobile if you want to keep the same style, otherwise it will look misaligned.

Hope that helps.

B.

Thank YOU!!!!!! This works perfect!!!!!