Jump to content

Can I change the Header Style for one page only?

Recommended Posts

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

Link to comment

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;}
}

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

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

image.thumb.png.f804fd00a7225fe94b1507c4241569bf.png

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.