Can I change the Header Style for one page only?

Site URL: https://hexahedron-soybean-zdl8.squarespace.com/

Hi there,

Is there anyway to change the header style for one page on my site? I currently use "Dynamic" across my site where i then have an image at the top of every page so that Navigation sits over the image. However, i would like to use a blog. Inside blog post pages, you cannot add images in a new section above the post. Therefore, when my site is set to "Dynamic", my header is white and bland.

Ideally i would like to be able to set my header to grey with white navigation links and keep the blog post page white. 

Is this possible? 

I thought that the solution would be to use "Dynamic" header style across my site and then for my blog post pages, target them using CSS to change the header style to "Solid". I am not advanced enough at CSS to know how to write this code and if its even possible.

Any help is massively appreciated.

Thanks,

Jon

Site password: testing123

It looks like you resolved it?

Hi Tuan,

I think I managed to solve this.

Not sure if there's a better/cleaner way to do this.

I used this to achieve it incase anyone else might want to know.

//News Blog Post Pages - Header Settings//
.collection-type-blog-masonry.view-item .header#header {
  background: #949598 !important;
  
    a#site-title {
  color: white;}
  
    .header-nav-item a{
    color: white;}
}

On 2/8/2022 at 12:46 AM, JonnyIlsley said:

Hi Tuan,

I think I managed to solve this.

Not sure if there's a better/cleaner way to do this.

I used this to achieve it incase anyone else might want to know.

 

//News Blog Post Pages - Header Settings//
.collection-type-blog-masonry.view-item .header#header {
  background: #949598 !important;
  
    a#site-title {
  color: white;}
  
    .header-nav-item a{
    color: white;}
}

Your code target Blog Masonry, with blog grid, it will need another code. Use this code for all blog style

body[class*="collection-type-blog"].view-item {
.header#header {
  background: #949598 !important;
  }
    a#site-title {
  color: white;}
  
    .header-nav-item a{
    color: white;}
}

Hi Tuan,

Would you please write the CSS so that I can change the Header Style to 'Dynamic' on this one page only:

https://snail-saxophone-k3pk.squarespace.com/content

Kind regards,

On 9/29/2022 at 8:23 AM, daniellofarrell said:

Hi Tuan,

Would you please write the CSS so that I can change the Header Style to 'Dynamic' on this one page only:

https://snail-saxophone-k3pk.squarespace.com/content

Kind regards,

Edit that page > Add a Code Block (anywhere) > Use this code

<style>
  .header#header {
  background: #949598 !important;
  }
    a#site-title {
  color: white;}
  
    .header-nav-item a{
    color: white;}
</style>

@tuanphan

Thank you kind Sir.

@tuanphan

Hello Tuan,

The code didn't work.

Would you please try instead this page:

https://snail-saxophone-k3pk.squarespace.com/about

I would like the header style to be Dynamic

On 9/30/2022 at 1:58 PM, daniellofarrell said:

@tuanphan

 

Hello Tuan,

The code didn't work.

Would you please try instead this page:

https://snail-saxophone-k3pk.squarespace.com/about

I would like the header style to be Dynamic

I don't see Code Block on this page. Have you added it yet? (You can use Code Block or Page Header)

@tuanphan

Hi Tuan,

Thanks for your reply.

Ok so I just added your code to a code block (html) on this page:

https://snail-saxophone-k3pk.squarespace.com/about

Unfortunately the Header Style did not change to Dynamic.

Do you know how to change the Header Style to Dynamic on this page?

Cheers,

Dan

On 10/1/2022 at 3:20 PM, daniellofarrell said:

@tuanphan

 

Hi Tuan,

Thanks for your reply.

Ok so I just added your code to a code block (html) on this page:

 

https://snail-saxophone-k3pk.squarespace.com/about

Unfortunately the Header Style did not change to Dynamic.

Do you know how to change the Header Style to Dynamic on this page?

Cheers,

Dan

Ah, the code missing a dot symbol. Use this new code

<style>
  header#header {
  background: #949598 !important;
  }
    a#site-title {
  color: white;}
  
    .header-nav-item a{
    color: white;}
</style>

Dear @tuanphan

Thank you again for your help.

I tried your new code, but it didn't work.

Would you please help me again?

I'll restate the problem:

I am trying to change the Header style from 'Solid' to 'Dynamic' on this page:

https://snail-saxophone-k3pk.squarespace.com/about

Kind regards,

Dan

On 10/3/2022 at 8:22 AM, daniellofarrell said:

Dear @tuanphan

 

Thank you again for your help.

I tried your new code, but it didn't work.

Would you please help me again?

I'll restate the problem:

I am trying to change the Header style from 'Solid' to 'Dynamic' on this page:

https://snail-saxophone-k3pk.squarespace.com/about

Kind regards,

Dan

 

 

Use this code

<style>
   .header-background-solid {
  background: #949598 !important;
  }
    .header-title-logo img {
    filter: brightness(0) invert(1);
    }
  
    .header-nav-item a{
    color: white !important;}
</style>