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

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

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

Share this post


Link to post

9 answers to this question

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

Share this post


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!

Share this post


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



Share this post


Link to post
  • 0

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

Share this post


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