Pacific Template: How to add CTA Button in Nav?

Site URL: https://seagroverehab.com

We are using the Pacific template; I am having difficulty using CSS code I found in other threads to make the "Schedule a Discovery Call" in our top nav be a CTA button. Anyone know if it can be done and how? We don't have a secondary nav option that I've seen in some tutorials. 

If a button isn't possible, it is possible to have "Schedule a Discovery Call" in a different font color than the others using Code? (It isn't possible in Site Styles.)

Thanks!

Add to Home > Design > Custom CSS

header#header [href*="calendly.com"] {
    background: white;
    color: blue;
}

Thank you, tuanphan! That worked perfectly. Do you know how I could make the font color change on the button to either Gold rgb - 166, 121, 069, hex - #A67945, or Teal rgb - 036, 081, 082, hex - #245152?

I tried:

header#header [href*="calendly.com"] {
    background: white;
    color: #245152;
} 

But it didn't change it.

5 hours ago, SRP said:

Thank you, tuanphan! That worked perfectly. Do you know how I could make the font color change on the button to either Gold rgb - 166, 121, 069, hex - #A67945, or Teal rgb - 036, 081, 082, hex - #245152?

I tried:

header#header [href*="calendly.com"] {
    background: white;
    color: #245152;
} 

But it didn't change it.

header#header [href*="calendly.com"] {
    background: #fff;
    color: #245152 !important;
}
header#header [href*="calendly.com"]:hover {
    color: #efece5 !important;
}

Brilliant! Thank you so much for all your help!!

Hey everyone!

This code didn't work for me. I found this one (see below) that works, but it also highlighst my sub-pages from other folder in the navigation bar. Any idea how I can get it to target just the last link?

div#mainNavWrapper nav div:last-child a{
    color: #fff !important;
    padding:10px 20px !important;
    border: 0px solid #000 !important;
    background-color: #8d073a !important;
    border-radius:16px !important;
    }

div#mainNavWrapper nav div:last-child a:hover{
    color: #000 !important;
    background-color:#fff !important;
    }

Thank you!

12 hours ago, Juisafish said:

Hey everyone!

This code didn't work for me. I found this one (see below) that works, but it also highlighst my sub-pages from other folder in the navigation bar. Any idea how I can get it to target just the last link?

div#mainNavWrapper nav div:last-child a{
    color: #fff !important;
    padding:10px 20px !important;
    border: 0px solid #000 !important;
    background-color: #8d073a !important;
    border-radius:16px !important;
    }

div#mainNavWrapper nav div:last-child a:hover{
    color: #000 !important;
    background-color:#fff !important;
    }

 

Thank you!

Try this code

div#mainNavWrapper nav>div:last-child a{
    color: #fff !important;
    padding:10px 20px !important;
    border: 0px solid #000 !important;
    background-color: #8d073a !important;
    border-radius:16px !important;
    }

div#mainNavWrapper nav>div:last-child a:hover{
    color: #000 !important;
    background-color:#fff !important;
    }

If it doesn't work, please share link to your site

10 hours ago, tuanphan said:

Try this code

div#mainNavWrapper nav>div:last-child a{
    color: #fff !important;
    padding:10px 20px !important;
    border: 0px solid #000 !important;
    background-color: #8d073a !important;
    border-radius:16px !important;
    }

div#mainNavWrapper nav>div:last-child a:hover{
    color: #000 !important;
    background-color:#fff !important;
    }

If it doesn't work, please share link to your site

You've done it again, it works! Thank you!

Haha, it's me again with a new question @tuanphan 🙂

Do you know if I can have a similar look for this button on mobile? 🤔

Thank you!

On 10/15/2021 at 2:26 AM, Juisafish said:

Haha, it's me again with a new question @tuanphan 🙂

Do you know if I can have a similar look for this button on mobile? 🤔

Thank you!

Can you share link to your site? We can check easier