Jump to content

How to change navigation font colour on one page?

Recommended Posts

I am trying to change the font colour of my site navigation on one page only and haven't had any luck at all with any code suggestions. I am using a Brine template. I've already added a custom logo code to the Advanced section of my portfolio page so I'm wondering if that's what's getting in my way? These are the codes I've tried (using my own collection #): 

#collection-5fc6f37befc65c5b7a35dc2e .Header-nav-item {
  color: #9b6b3b;

and

nav#mainNavigation * {
    color: #9b6b3b !important;
}

If anyone could help, it would be so very appreciated! In case it helps, here is the code that's in there currently for the alternate logo (which is working just fine):

<style>
.header-title-logo a {
  content: url("https://static1.squarespace.com/static/5fc6eb4e9ea50d41209e5974/t/6004ba6e12a04d6cc4a550cc/1610922606737/LOGO+OPTION+3-+Lora-+transparent+background-+bronze.png");
  }
</style>

I tried to combine the two codes and it didn't do anything. Thanks so much for your help!

Edited by mrsmahersbar
Link to comment
1 hour ago, mrsmahersbar said:

I am trying to change the font colour of my site navigation on one page only and haven't had any luck at all with any code suggestions. I am using a Brine template. I've already added a custom logo code to the Advanced section of my portfolio page so I'm wondering if that's what's getting in my way? These are the codes I've tried (using my own collection #): 

#collection-5fc6f37befc65c5b7a35dc2e .Header-nav-item {
  color: #9b6b3b;

and

nav#mainNavigation * {
    color: #9b6b3b !important;
}

If anyone could help, it would be so very appreciated! In case it helps, here is the code that's in there currently for the alternate logo (which is working just fine):

<style>
.header-title-logo a {
  content: url("https://static1.squarespace.com/static/5fc6eb4e9ea50d41209e5974/t/6004ba6e12a04d6cc4a550cc/1610922606737/LOGO+OPTION+3-+Lora-+transparent+background-+bronze.png");
  }
</style>

I tried to combine the two codes and it didn't do anything. Thanks so much for your help!

I used the demo template, are you sure the collection id is correct?

#collection-56099b55e4b0ec7b8a89d273 .Header-nav-item,
#collection-56099b55e4b0ec7b8a89d273 .Mobile-overlay-nav-item {
  color: #9b6b3b;
} 

Use this extension to get the correct id for your page

Chrome Web Store - Extensions (google.com)

image.thumb.png.6d7cae0472125d4d382f7d0fddd53ae0.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
14 minutes ago, mrsmahersbar said:

@bangank36 Thanks so much for your quick attempt to help! I am sure, that is the plugin I used after seeing another one of your posts. Whenever I enter it into the Advanced section of the page, the code shows up at the top of the page. Not sure what I'm doing wrong here.

error message.jpg

You should paste into Design->Custom CSS instead of code injection

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

@bangank36Whenever I do that, nothing happens at all. It's very strange. Is the string of code you're providing the whole string or am I supposed to add something else to it? The colour should be a dark gold-brown but it's staying the same light colour as on my homepage. Thanks again for your help.

nothing happens.jpg

Edited by mrsmahersbar
Link to comment
5 hours ago, mrsmahersbar said:

@bangank36Whenever I do that, nothing happens at all. It's very strange. Is the string of code you're providing the whole string or am I supposed to add something else to it? The colour should be a dark gold-brown but it's staying the same light colour as on my homepage. Thanks again for your help.

nothing happens.jpg

#collection-56099b55e4b0ec7b8a89d273

is demo id, you got to replace it with the one on your page

image.png.8360c699ffc7d8d91a349157ba365edd.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

@bangank36I don't know how that happened... it wasn't letting me paste my collection id into the code. I tried again with the below code once I got the clipboard function working again and it's the same issue. Will not change colour. I have no idea why it's being so stubborn!

#collection-5fc6f37befc65c5b7a35dc2e .Header-nav-item,
#collection-5fc6f37befc65c5b7a35dc2e .Mobile-overlay-nav-item {
  color: #9b6b3b;

Link to comment
1 hour ago, mrsmahersbar said:

@bangank36I don't know how that happened... it wasn't letting me paste my collection id into the code. I tried again with the below code once I got the clipboard function working again and it's the same issue. Will not change colour. I have no idea why it's being so stubborn!

#collection-5fc6f37befc65c5b7a35dc2e .Header-nav-item,
#collection-5fc6f37befc65c5b7a35dc2e .Mobile-overlay-nav-item {
  color: #9b6b3b;

Is it the cover page? Custom css not apply on cover page.

What is your site url? I can have a look

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
On 1/20/2021 at 7:30 AM, mrsmahersbar said:


Try add this to Cover Page Header

<style>
.Header-nav-item,.Mobile-overlay-nav-item {
  color: #9b6b3b;
} 
</style>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 9 months later...
16 minutes ago, SouthernSunEvents said:

@tuanphanAlso trying to change nav text color to black on this page but I'm stuck:

www.southernsunevents.com/about-us

we can have 2 ways:

- Add to Home > Design > Custom Css

#not-found .Header-nav-inner > a {
  color:#000 !important;
}

- Home > Pages > Choose the page you want to apply the nav text color

Adding to Advanced > PAGE HEADER CODE INJECTION

<style>
	.Header-nav-inner > a {
	    color: #000 !important;
    }
</style>

Change the color with one you want to apply

Let me know if it works properly on your site

Support me by pressing 👍 if this useful for you

Edited by bangank36

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
On 10/27/2021 at 12:06 AM, SouthernSunEvents said:

@tuanphanAlso trying to change nav text color to black on this page but I'm stuck:

www.southernsunevents.com/about-us

You can use above code.

Or if you use Personal Plan, you can edit page >> Add a Code Block >> Paste above code. You can do similar for other pages

<style>
	.Header-nav-inner > a {
	    color: #000 !important;
    }
</style>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

i have used this code to change the color for navigation buttons. it worked before but it hasnt past couple of months. im assuming b/c of windows update ? can you let us know how to re-enable the code so it works 

header.Header [href*="Category=sale"] {
    color: #FF0000 !important;

Link to comment
On 11/1/2021 at 9:47 PM, maxi said:

i have used this code to change the color for navigation buttons. it worked before but it hasnt past couple of months. im assuming b/c of windows update ? can you let us know how to re-enable the code so it works 

header.Header [href*="Category=sale"] {
    color: #FF0000 !important;

Can you share link to page where you need to change nav buttons? We can check easier

Also, your code missing closing } symbol

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 11/4/2021 at 11:24 PM, maxi said:

hello .. i figured it out 🙂 

www.maxishop.ca is the website .. 

 

 

Did you figure it out or still need help??

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 weeks later...
23 hours ago, SouthernSunEvents said:

This worked perfect but I forgot I'll also be needing to change the "+" drop down color for mobile and the "MENU" for tablet views. Any ideas? @tuanphan @bangank36

Thanks so much!

Hi,

You can try adding to Home > Design > Custom Css

//Change the color of + button
@media screen and (min-width: 100px) and (max-width: 766px) {
  button.Mobile-bar-menu:after{
    color: red !important;  
  }
}

//Change the color of menu button
button.Mobile-bar-menu:after{
  color: red !important;
}

Change the color until it meets your desired result

Let me know how it works on your site

Press 👍 or mark this answer as solution to help another one too

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
  • 2 months later...

We have noted that when we have (1) variant for product ie one size, one colour, one of .. on the front end only the ADD TO CART button shows up. The size and colour drop menus do not show therefore the consumer doesn't know what they are buying .. until they click add to cart .. the size then shows up in the cart ! .. is there a CSS for this glitch ?

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.