Looking for CSS code to have a Dynamic Header target one specific page

Site URL: https://tangerine-tiger-4ty6.squarespace.com/blog

Hi,

I've set the style of my Header to be "Solid". I'm happy with this option on all pages except my blog main page.

How can I set the "Dynamic" header to be used only on the Blog main page (so not on the individual Blog post pages either) and keep all my other pages with the "Solid" header. What would be the CSS code?

I've tried a couple things that didn't work...

Thanks,

Sarah

To change header color on blog list page, add this to Design > Custom CSS

body[class*="collection-type-blog"].view-list header#header {
    background-color: #f1f !important;
}

Thanks @tuanphan Apologies I'm only seeing your response now.

On my Blog pages, I'm actually looking at having the background like in this template (for example) > https://clarkson-demo.squarespace.com/?nochrome=true 

Is that possible?

Thanks,

Sarah

On 2/3/2022 at 12:51 PM, SarahSWD said:

Thanks @tuanphan Apologies I'm only seeing your response now.

On my Blog pages, I'm actually looking at having the background like in this template (for example) > https://clarkson-demo.squarespace.com/?nochrome=true 

Is that possible?

Thanks,

Sarah

You mean header transparent over banner image??

On 2/8/2022 at 7:49 AM, tuanphan said:

You mean header transparent over banner image??

Looking to do the same thing. Force the dynamic header on onepage only, in order to have the header over an image only on the homepage, and have a regular one on the other pages.

On 2/14/2022 at 9:03 PM, MidnightClub said:

Looking to do the same thing. Force the dynamic header on onepage only, in order to have the header over an image only on the homepage, and have a regular one on the other pages.

If you share link to homepage, we can check easier

Hey @tuanphan

here is the link : https://how-we-made-it.squarespace.com/

password: mcforever

For now, i want on this page the header to fade when reaching the top of the page, and have the background and logo disappear, while changing links and buttons colors (to white). What i have now is a bit brutal.

And it's only on this page. Rest of the site, I'll have alway the logo in place, and a white background.

Cheers,
Fab

On 2/22/2022 at 9:50 PM, MidnightClub said:

 

made header home.mov 4.92 MB · 4 downloads  

 

It looks like you figured it out?

Hey @tuanphan,

Nope, just going around the problem. Header is set as solid and only on the homepage I made the background transparent on the fixed header (and change colors and hid the logo).

So it's a fix, but it's not great, can't target the cart icon to make it white only on fixed header (with the scroll back option, the header as white background when you scroll back up, so links need to be black, but then on top of the image without background, needs to be white).

So best would be to be able to have a dynamic header on the homepage, and solid or whatever on the other pages.. 

On 2/8/2022 at 2:49 PM, tuanphan said:

You mean header transparent over banner image??

Yes I guess thta's what it is 🙂  or maybe more like header transparent over background image of the first section... maybe it means the same not sure...

Is there way to do it on the Blog Index page? Note: I don't want it to cover the footer though.

Thanks,

Sarah

20 hours ago, SarahSWD said:

Yes I guess thta's what it is 🙂  or maybe more like header transparent over background image of the first section... maybe it means the same not sure...

Is there way to do it on the Blog Index page? Note: I don't want it to cover the footer though.

Thanks,

Sarah

Try adding this to Design > Custom CSS

/* Blog list page */
body[class*="collection-type-blog"].view-list article section:first-child {
    padding-top: 0px !important;
}
body[class*="collection-type-blog"].view-list header#header {
    background-color: transparent;
}

On 3/15/2022 at 11:23 PM, tuanphan said:

Try adding this to Design > Custom CSS

/* Blog list page */
body[class*="collection-type-blog"].view-list article section:first-child {
    padding-top: 0px !important;
}
body[class*="collection-type-blog"].view-list header#header {
    background-color: transparent;
}

 

@tuanphan - is it possible to do that with non blog content? 

for example if dynamic is set for the home page, change all other navigations to another colour? or set different styles for different pages so that dynamic can be altered non global?

On 3/18/2022 at 9:07 PM, PeterMills said:

@tuanphan - is it possible to do that with non blog content? 

for example if dynamic is set for the home page, change all other navigations to another colour? or set different styles for different pages so that dynamic can be altered non global?

Can you share link to homepage? We can give exact code easier