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

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

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

--- Happy New Year

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

 

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

--- Happy New Year

Link to post
  • 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 post
  • 0
On 12/8/2020 at 7:51 AM, tuanphan said:

I don't sure, if you share site url, I can tweak the code

Hi @tuanphan our URL is www.casamiainterior.com

In a post above I explained what I want to do. Thanks for your help!

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

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

--- Happy New Year

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