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

Adjusting border on nav bar on anything but landing page

Question

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

7 answers to this question

Recommended Posts

  • 1

Ok. Can you confirm which template you're using? Depending on which template you're using, you might be able to fix it without CSS. 

Edited by lu.diehl
explanation

Share this post


Link to post
  • 1

Change your Custom CSS so the border is #999 instead of white so that you have a darker border on all the other pages. Then repeat the code, with the border set to white, prepending the selectors with '.homepage'. This will ensure the homepage is white instead. 

Let me know if you need more specific advice.

Your site using using a Brine-family template btw, which includes what Squarespace refer to as the 'Custom Template' (sites made by answering questions instead of picking a design).

Edited by paul2009

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi, I'm Paul, founder of SF Digital, a specialist company building the features that Squarespace didn't include
I am a Squarespace Developer and Squarespace Circle Leader with a
strong reputation on the Squarespace Forum. I'm trusted by thousands of Squarespace users worldwide, including designers, freelancers, business owners and agencies. My extensions add capabilities to Squarespace websites around the globe. They include the Enquiry Form ExtensionDatepicker Extension and Age Verification ExtensionNeed a custom Squarespace extension? Tell me about the functionality you need. Note that some links in my posts may be affiliate links. Book a Squarespace Expert when you need help.

Share this post


Link to post
  • 1
On 11/16/2019 at 8:05 AM, NEWeOffset said:

I believe it's a custom template!

Goes live today anyway but I think it would be a lovely touch

here's the full code if you want to copy and paste - exactly what @paul2009 suggested. If you ever add a background to any other page you will have to tweak the code again. 

.homepage .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 #fff;
   padding: 10px 30px;
   border-radius: 300px;
 }

.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 #999;
   padding: 10px 30px;
   border-radius: 300px;
 }

 

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