NabeelSV Posted May 8, 2017 Share Posted May 8, 2017 (edited) 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 May 8, 2017 by NabeelSV Initial Revision Link to comment
Solution beatrizc Posted May 8, 2017 Solution Share Posted May 8, 2017 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. SodaCreekDigital and Varzel 1 1 Squarespace Customization Geek | Helping fellow designers code the heck out of Squarespace ☞ Get the free Squarespace Coding Essentials guide to reach that next level of customization you're aiming for. ☞ Check out all the plugins & mini-courses and masterclasses available to help speed up your projects. ☞ Looking to outsource a customization or fix? I'd love to help you out. Get in touch! Website | Youtube | Facebook | Pinterest Link to comment
NabeelSV Posted May 8, 2017 Author Share Posted May 8, 2017 @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 comment
beatrizc Posted May 9, 2017 Share Posted May 9, 2017 You're most welcome :) Squarespace Customization Geek | Helping fellow designers code the heck out of Squarespace ☞ Get the free Squarespace Coding Essentials guide to reach that next level of customization you're aiming for. ☞ Check out all the plugins & mini-courses and masterclasses available to help speed up your projects. ☞ Looking to outsource a customization or fix? I'd love to help you out. Get in touch! Website | Youtube | Facebook | Pinterest Link to comment
acblackcreative Posted August 24, 2017 Share Posted August 24, 2017 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! Link to comment
beatrizc Posted August 24, 2017 Share Posted August 24, 2017 I'm really happy to hear that. You're welcome! :) Squarespace Customization Geek | Helping fellow designers code the heck out of Squarespace ☞ Get the free Squarespace Coding Essentials guide to reach that next level of customization you're aiming for. ☞ Check out all the plugins & mini-courses and masterclasses available to help speed up your projects. ☞ Looking to outsource a customization or fix? I'd love to help you out. Get in touch! Website | Youtube | Facebook | Pinterest Link to comment
LaurenLPoole Posted August 23, 2018 Share Posted August 23, 2018 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. Link to comment
tuanphan Posted September 29, 2019 Share Posted September 29, 2019 With Avenue Template, use this code .main-nav li:last-child a { background: #000; color: #fff !important; padding: 10px 20px !important; border-radius: 20px; } benphilbeck 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
todd-y Posted September 30, 2019 Share Posted September 30, 2019 How would I make the last two menu items show as a call to action? Link to comment
NEWeOffset Posted November 14, 2019 Share Posted November 14, 2019 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 comment
Guest Posted February 24, 2020 Share Posted February 24, 2020 Brilliant! Thanks @beatrizc Link to comment
ChristineRedFrog Posted April 17, 2020 Share Posted April 17, 2020 Is there a code for the Five template to have the last link look like a button? Link to comment
tuanphan Posted April 18, 2020 Share Posted April 18, 2020 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; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
HospiceGeorgianTriangle Posted May 8, 2020 Share Posted May 8, 2020 How about code for the Fulton Template to have the last menu item appear as a button? Link to comment
tuanphan Posted May 8, 2020 Share Posted May 8, 2020 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? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
HospiceGeorgianTriangle Posted May 8, 2020 Share Posted May 8, 2020 2 minutes ago, tuanphan said: Can you share link to your site? https://www.hospicegeorgiantriangle.com/ Thank you in advance! Link to comment
tuanphan Posted May 8, 2020 Share Posted May 8, 2020 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; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
HospiceGeorgianTriangle Posted May 8, 2020 Share Posted May 8, 2020 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!! Link to comment
Rachellemb Posted May 18, 2020 Share Posted May 18, 2020 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 comment
tuanphan Posted May 19, 2020 Share Posted May 19, 2020 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; } Rachellemb 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
kherzog Posted June 13, 2020 Share Posted June 13, 2020 @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. Link to comment
kherzog Posted June 13, 2020 Share Posted June 13, 2020 Here's the link to the live site: https://www.lynnemeade.com/ Link to comment
tuanphan Posted June 13, 2020 Share Posted June 13, 2020 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; } } kherzog 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
kherzog Posted June 13, 2020 Share Posted June 13, 2020 @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 1 Link to comment
kherzog Posted June 13, 2020 Share Posted June 13, 2020 @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/ Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment