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