How to bring split screen header image as navigation bar background?

Tara_099 · December 7, 2022

The attached image shows the type of effect I wish to achieve. Header image continuing behind navigation bar. How might I achieve this? When I select "dynamic" in the navigation menu it only takes on the blue colour behind it and not the photo.

https://mackerel-snail-xgce.squarespace.com/

Password: mike123

tuanphan · December 7, 2022

Try adding this to Design > Custom CSS

/* Home transparent */
body.homepage .header-background-solid {
    opacity: 0 !important;
    background-color: Transparent !important;
}
body.homepage article section:first-child {
    padding-top: 0 !important;
}

Tara_099 · December 7, 2022

Thanks @tuanphan that seems to have worked amazingly! You are the best!

rachgib · February 20, 2023

Hi @tuanphan! Do you know what I'd have to change to make this work for a half-screen gallery block? Appreciate any advice!

tuanphan · February 20, 2023

5 hours ago, rachgib said:

Hi @tuanphan! Do you know what I'd have to change to make this work for a half-screen gallery block? Appreciate any advice!

What is your site url? We can check easier

How to bring split screen header image as navigation bar background?

Recommended Posts

Tara_099

Link to comment

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

Tara_099

Posted Images

tuanphan

Link to comment

Tara_099

Link to comment

rachgib

Link to comment

tuanphan

Link to comment

Create an account or sign in to comment

Tara_099

Events

Circle Day

Resources

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources