Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

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


NabeelSV
Go to solution Solved by beatrizc,

Question

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!

Edited by NabeelSV
Initial Revision
Link to post
  • Answers 29
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

With Avenue Template, use this code .main-nav li:last-child a { background: #000; color: #fff !important; padding: 10px 20px !important; border-radius: 20px; }

Remove code you used & add this nav#main-navigation>ul>li:last-child a { background: red; }  

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

Posted Images

Recommended Posts

  • 3

Hi,

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


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

screen-shot-2017-05-08-at-62211-pm.png.cc22e7f42d47ebe0497c8a6c95435a72.png

Link to post
  • 1

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

Link to post
  • 0

@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!

Link to post
  • 0

With Avenue Template, use this code


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



You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 0
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;
}

 

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 0
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?

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 0
42 minutes ago, HospiceGeorgianTriangle said:

Add to Home > Design > custom CSS

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

 

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 0

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?

Link to post
  • 0
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;
}

 

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 0

@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?

Custom-Navigation-Button-display-1.thumb.png.f81959e730dacd0ac1c634f5d856e929.png

 

Thank you in advance for your help.

Link to post
  • 0
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;
}
}

 

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 0

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

Link to post
  • 0

@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/

Custom-Navigation-Button-display-2.thumb.png.f5650614dea734fb21299f1bb5f74427.png

Link to post
  • 0
36 minutes ago, kherzog said:

@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/

 

.main-nav>ul>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;
}
}

try this code

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...