Adjusting border on nav bar on anything but landing page

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

Hi @NEWeOffset, can you share a link to your website and pwd if it is pwd protected?

Sure!

www.weoffset.co.uk

Abigail 1 is the password

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. 

I believe it's a custom template!

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

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

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

Thank you both so much! Has worked a charm and I am so happy with the result!