Jump to content

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

Recommended Posts

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

Link to comment

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

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 weeks later...
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??

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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

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

It looks like you figured it out?

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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

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

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

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

Edited by PeterMills
Link to comment
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

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.