I need to change the color of my site header text to white on the pages where the background image is dark

Hi there, the home page of my site is white, and the text of my site header is black. This is great, but on my individual pages, I'm using backgrounds that bleed all the way to the top, and when those images are dark, the black font doesn't show up. How can I make it so that the text on the headers shows as white on these pages where the image is dark. I can't seem to edit them directly without affecting the home page. Below are a couple of images to show what I mean. The first is the home page where you can read my name, the next is a page where the name becomes unreadable. Thank you.

Hi there, yes thank you so much!

It is https://wombat-circle-7cbs.squarespace.com/

I didn't put a password on it, so you should be able to access it.

On 6/26/2024 at 11:01 PM, Heather19 said:

Hi there, yes thank you so much!

It is https://wombat-circle-7cbs.squarespace.com/

I didn't put a password on it, so you should be able to access it.

 

 

Try this code to Website Tools > Custom CSS

body.collection-6645248ab110723f39d9ad69.view-item:has(#page>article>section:first-child .section-background img) div.header-nav-item a {
    color: #fff !important;
}
body.collection-6645248ab110723f39d9ad69.view-item:has(#page>article>section:first-child .section-background img) a#site-title {
    color: #fff !important;
}

No CSS is needed, if you set the first section's color, you change logo and nav color in Site Styles → Settings.

Hi there, thank you for your answers.

Nick, I tried choosing to make my site title white under the darkest mode in Edit Color Theme as you showed. It worked on my first page, but not the other pages. I went in again and played around in the darkest modes, making sure they were all set to display the title and nav in white. They are, but for some reason, they are still showing up as black text. Even my first page, which I had fixed at first. 

I'm attaching a photo. Can't figure out what I'm doing wrong... 

Thank you for your help.

Heather

Hi Tuan, thanks for the code, it worked for my pages that have the background as images, but not for those that have gifs. Is there any more code for that? 

Thank you!

Are you setting the actual section to that color, e.g. do you set the first section to DARKEST 1?

Hmmm, when you say first section do you mean on the homepage like in the first photo i attached? When I set it to darkest, it makes the background dark, which I don't want.

On the other hand, when I go into the specific page, and look at my colors, (like photo 2) I'm not sure how to "set" the color to darkest. 

Apologies for my complete newbie-ness.

Oooh, with your help and these notes below I've figured it out, I wasn't editing the actual section. 

Here are the instructions to find where to edit it for others running into the same:

To change a section's color theme:

1. Open the Pages panel.
2. Select the page you want to edit and click Edit in the top-left corner.
3. Click Edit section or the pencil icon on the section you want to change.
4. In the Colors tab, click a theme to apply it to that section.
5. Click Save to save your changes and keep editing, or Exit then Save to close the editor.

Nick, thank you so much for showing me that I had to change the section colour to darkest to make the type show as white. That's not intuitive in the online help from SS.

I really appreciate you answering me! Cheers.

Sorry one more question, now that I've made the section background darkest, when I scroll the page, my nav bar shows (because it's now black). I've seen other sites where this doesn't happen. The top nav bar text is in white over the photo and when you scroll, you don't see this black bar. I'm wondering if I screwed up the color somewhere else?

thanks

I think it's by design because if there were no background, it wouldn't show white text against the next white section.  

You can try removing the background, but I will not recommend it:

[data-header-style="dynamic"].header {
  background: transparent !important;
}

Hmmm, interesting. I tried it but it caused other issues. It's strange because when I look at this website, it works the way I'd like. The site header is in white on all the pages, and when you scroll, the site header just moves with it and disappears. This is how I was hoping for my site to work:)

https://www.taralawall.com/work/mattressfirm2

Got it! Did the trick. Thank you so much for all of your help!