Dynamic Header for Home Page Only

Site URL: https://arugula-ladybug-m8r2.squarespace.com/

Hello, 

Is it possible to have a dynamic Header for the homepage only?  All the other pages can be solid. 

It would be great if anyone knew of any CSS code to make the homepage Dynamic?

https://arugula-ladybug-m8r2.squarespace.com/

password: 1234

Matt

Thanks tuanphan, 

This is perfect. 🤙

Matt

On 8/29/2022 at 3:03 AM, tuanphan said:

You mean homepage header should be transparent?

Add to Design > Custom CSS

body.homepage article section:first-child {
    padding-top: 0px !important;
}
body.homepage .header-background-solid {
    background-color: transparent !important;
}

 

Can you add in code to still make it black when you scroll similar to all my other pages?

16 hours ago, EmilyMMorris said:

Can you add in code to still make it black when you scroll similar to all my other pages?

Use this

body.homepage article section:first-child {
    padding-top: 0px !important;
}
body.homepage .header-background-solid {
    background-color: transparent !important;
}
body.homepage header#header.shrink {
	background-color: black !important;
}

If it doesn't work, please share link to your site, we can check easier

Hey @tuanphan, thanks for your answers.

I'm trying to do the same –make the header transparent– in another page which is not the homepage. In my website I've called it "Reservations".

I've tried to change "body.homepage" to "body.reservations" but it doesn't work.

How should I tweak the code?

Thanks!

1 hour ago, Rosamante said:

Hey @tuanphan, thanks for your answers.

I'm trying to do the same –make the header transparent– in another page which is not the homepage. In my website I've called it "Reservations".

I've tried to change "body.homepage" to "body.reservations" but it doesn't work.

How should I tweak the code?

Thanks!

Only home has .homepage, other pages will use random id. Can you share link to Reservations page?

5 hours ago, tuanphan said:

Only home has .homepage, other pages will use random id. Can you share link to Reservations page?

Sorry, now

https://www.datingimmersion.com/reservas

17 hours ago, Rosamante said:

Sorry, now

https://www.datingimmersion.com/reservas

Use this code

body#collection-64a916228a47db6a5ed7e77e {
article section:first-child {
    padding-top: 0px !important;
}
.header-background-solid {
    background-color: transparent !important;
}
header#header.shrink {
	background-color: black !important;
}}

I'm trying to use the code @tuanphan provided to do exactly what OP was trying to achieve. But this code unfortunately isn't working for me.

body.homepage article section:first-child {
    padding-top: 0px !important;
}
body.homepage .header-background-solid {
    background-color: transparent !important;
}

My website is: eshertennis.co.uk

I would like my homepage to have a dynamic header, and every other page to have the solid header with the colour prescribed in global site styles (hex: #153643). Can anyone help?

On 9/13/2023 at 10:11 PM, jbassett said:

I'm trying to use the code @tuanphan provided to do exactly what OP was trying to achieve. But this code unfortunately isn't working for me.

body.homepage article section:first-child {
    padding-top: 0px !important;
}
body.homepage .header-background-solid {
    background-color: transparent !important;
}

My website is: eshertennis.co.uk

I would like my homepage to have a dynamic header, and every other page to have the solid header with the colour prescribed in global site styles (hex: #153643). Can anyone help?

You can set dynamic header, then use this code to change color on other pages

body:not(.homepage) header#header {
    background-color: #153643 !important;
}

2 hours ago, tuanphan said:

You can set dynamic header, then use this code to change color on other pages

body:not(.homepage) header#header {
    background-color: #153643 !important;
}

I don't know how you know the solution every single time @tuanphan but I am extremely grateful. Thank you so much.