Changing header and footer colour on specific pages, 7.1

Site URL: https://www.marycarslawarchitects.squarespace.com

Hi everyone! Struggling a bit with some header and footer changes.

1. How do change the header colour on hover, NOT invert (as I have at the mo)? The same code doesn't seem to be responding to a colour change.
2. How do I change the header colour on Projects page and the individual project pages?

Thanks so much!

Password: hello

Q1. I see you solved?

Q2. Add to Project Page Settings > Advanced > Header

<style>
  .header-announcement-bar-wrapper {
    background: red !important;
}
</style>

2 hours ago, tuanphan said:

Q1. I see you solved?

Q2. Add to Project Page Settings > Advanced > Header

<style>
  .header-announcement-bar-wrapper {
    background: red !important;
}
</style>

 

I've managed to change the colour, but now can't get the site title or "Menu" to change on hover. Help! 

Can you check site url? It seems ssl issue.

Quote

Q1. I see you solved?

Q2. Add to Project Page Settings > Advanced > Header

<style>
  .header-announcement-bar-wrapper {
    background: red !important;
}
</style>

Hi @tuanphan

I just tried this and it worked but when I'm in full bleed there's still some of the normal header colour on the sides. Is there any way to target the whole footer including when it's full screen on a wide screen monitor?

Thank you!

Also just in general thanks for all your comments on the squarespace forum, I've used most of your CSS code blocks and they've been a lifesaver! I can always count on your replies to work!

Quote

Hi @tuanphan

I just tried this and it worked but when I'm in full bleed there's still some of the normal header colour on the sides. Is there any way to target the whole footer including when it's full screen on a wide screen monitor?

Thank you!

Also just in general thanks for all your comments on the squarespace forum, I've used most of your CSS code blocks and they've been a lifesaver! I can always count on your replies to work!

I figured out how to fix the sides of the footer so that the new colour targets the whole footer and not just the content-wrapper:
 

<style>
  footer#footer-sections .section-background {
    background: red !important;
}
</style>

On 10/5/2020 at 11:16 AM, tuanphan said:

Q1. I see you solved?

Q2. Add to Project Page Settings > Advanced > Header

<style>
  .header-announcement-bar-wrapper {
    background: red !important;
}
</style>

 

Hi  @tuanphan

How do I do the same for the header font color for that same specific page ?

I tried this on page advanced but it didn't worked:

nav.header-menu-nav-list * {
    color: white !important;
}

22 hours ago, vcm said:

Hi  @tuanphan

How do I do the same for the header font color for that same specific page ?

I tried this on page advanced but it didn't worked:

nav.header-menu-nav-list * {
    color: white !important;
}

 

solved it. . insert css in the specific page:

header-nav-item a, .header-menu-nav-item a
 {
    color: white !important; 
}