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

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 comment

Recommended Posts

  • 0

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

Screen Shot 2020-10-12 at 12.18.44 PM.png

Edited by lstrauss831
Link to comment
  • 0
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; }

Screen Shot 2020-10-12 at 12.18.44 PM.png

change class to

.main-nav>li:last-child a

Email me if you have need any help (free, of course.). Answer within 24 hours.

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

Screen Shot 2020-10-15 at 12.52.23 PM.png

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 0
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

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 0

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

Capture.thumb.jpg.34a7028464b6ecb636a7c93bccca467a.jpg

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 0
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!

 

Edited by damish
Link to comment
  • 0
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

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 0
20 hours ago, stemajourneys said:

And how do you change to the font family of your preferance? THANK YOU SO MUCH, Beaver Hero & Beatriz you 've been silently my squarespace saviors! x Maria

Can you share link to your site?

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 0
On 9/29/2019 at 11:56 PM, tuanphan said:

With Avenue Template, use this code


 

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



 

 

thanks so much this code worked for me also (om template). My issue is that i'm also getting the call to action button in the drop-down menus in navigation. Is it possible to edit the code so that it is only in the main primary navigation and not the drop down? thanks in advance x 

Link to comment
  • 0
19 hours ago, sophiehellyer said:

thanks so much this code worked for me also (om template). My issue is that i'm also getting the call to action button in the drop-down menus in navigation. Is it possible to edit the code so that it is only in the main primary navigation and not the drop down? thanks in advance x 

Use this code

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 0
On 5/8/2017 at 4:26 PM, beatrizc said:

Hi,

You can try this. It targets the last item in your menu on both desktop and mobile:/storage/temp/6012-screen-shot-2017-05-08-at-62211-pm.png


 

.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

Thank YOU!!!!!! This works perfect!!!!!

Link to comment

Create an account or sign in to comment

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

×
×
  • Create New...