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

Hi all,

I'm a new user to Squarespace and I'm looking for some help.

I want to add a call to action button in my main navigation for the last link (Get Your Invite)

I've already tried a bunch of other css codes which have been posted as answers in previous questions before, however they don't seem to work with my Hyde template.

My website is - www.varaoptical.com

Any suggestions and answers will be highly appreciated, thanks!

Hi,

You can try this. It targets the last item in your menu on both desktop and mobile:

.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.

@BeatrizC Thank you ever so much BeatrizC, for your speedy response and help. I've been pulling my hair out trying to get one to work and your answer worked straight away! It looks wonderful, many thanks once again!

You're most welcome :)

Thank you for making a code that works! Praise God! Lol I've been frustrated with various codes that never work for my template, but this one does! Holy smokes!

I'm really happy to hear that. You're welcome! :)

Did you drop this code into the Custom CSS area? I tried this with changing the color to black, but it's not working for me. I'm using Avenue template.

With Avenue Template, use this code

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

How would I make the last two menu items show as a call to action?

Hello everyone,

I'm currently working on a site where I've put the call to action button in a pill-shape like this:

.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;
 }

The only issue is that on all other pages but the landing page the background is also white! Please can someone help me write a code to have a white border on the landing page, but black on all other pages.

Thank you so much in advance

Brilliant! Thanks @beatrizc

Is there a code for the Five template to have the last link look like a button?

21 hours ago, ChristineRedFrog said:

Is there a code for the Five template to have the last link look like a button?

nav#main-navigation ul li:last-child a {
    background: #000;
    color: #fff;
    font-size: 15px;
    padding: 5px 10px;
}

How about code for the Fulton Template to have the last menu item appear as a button?

4 minutes ago, HospiceGeorgianTriangle said:

How about code for the Fulton Template to have the last menu item appear as a button?

Can you share link to your site?

2 minutes ago, tuanphan said:

Can you share link to your site?

https://www.hospicegeorgiantriangle.com/

Thank you in advance!

42 minutes ago, HospiceGeorgianTriangle said:

https://www.hospicegeorgiantriangle.com/

Thank you in advance!

Add to Home > Design > custom CSS

nav#mainNavigation>div:last-child>a {
    background: red;
    color: white;
    border-radius: 20px;
}

10 hours ago, tuanphan said:

Add to Home > Design > custom CSS

nav#mainNavigation>div:last-child>a {
    background: red;
    color: white;
    border-radius: 20px;
}

 

Worked perfectly!! Thank you so much!!

Hello! I've added the code but see that anything that drops down to show more links in my header navigation are also affected by this code. Here's my website to see what I mean, it affects the "About" "Photography" and "Education" tabs: www.rachellewelling.com

Does anyone know a code to fix this so the code only makes the "Contact" a button?

18 hours ago, Rachellemb said:

Hello! I've added the code but see that anything that drops down to show more links in my header navigation are also affected by this code. Here's my website to see what I mean, it affects the "About" "Photography" and "Education" tabs: www.rachellewelling.com

Does anyone know a code to fix this so the code only makes the "Contact" a button?

Remove code you used & add this

nav#main-navigation>ul>li:last-child a {
    background: red;
}

@tuanphan When I used the code you recommended to convert a header navigation link into a button on a site using the Avenue template

Quote

 

With Avenue Template, use this code

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

 

the button became out of line with the rest of the navigation links. How can I fix?

Thank you in advance for your help.

Here's the link to the live site: https://www.lynnemeade.com/

3 hours ago, kherzog said:

Here's the link to the live site: https://www.lynnemeade.com/

.main-nav li:last-child a {
   background: #000;
   color: #fff !important;
   padding: 10px 20px !important;
   border-radius: 20px;
}
@media screen and (min-width:641px) {
#topNav nav ul {
    display: flex;
    align-items: center;
}
}

 @tuanphan, thank you so much for getting back to me on a Saturday! The code worked like a charm. : -)

The call-to-action button improves navigation user experience 10X. I narrowed the size slightly. When we launch the shop, I'll move the button to the shop link. I already figured out how to do that.

You have my gratitude.

@tuanphan I just looked at the custom button on link fix to the last link on right side, on our site "Contact" link. When I rolled over links that were in folders ("About" and "Collections"), a button appears on the last link in the folder. How can I fix that display issue?

I've attached image of extra button issue on computer desktop. Same display is happening on mobile. Live site is https://www.lynnemeade.com/