Jump to content

Changing header and footer colour on specific pages, 7.1

Recommended Posts

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

Link to comment
  • Replies 7
  • Views 1.6k
  • Created
  • Last Reply
  • 3 months later...

 

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!

Screenshot 2021-01-25 223003.png

Link to comment
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>

 

Link to comment
  • 6 months later...
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;
}

 

Link to comment
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; 

Link to comment

Archived

This topic is now archived and is closed to further replies.

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