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

If a response has helped you, please give thanks using the  like-20-mag.png.3997345d620e40b4760b5d7a667cad54.png button.
Need personalised help? I'm a professional Developer who works with Designers internationally. You can book me via my company's website. www.sf.digital

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