Jump to content

Creating a transparent homepage header with solid bar interior headers

Recommended Posts

Hi everybody.

I'm working on a site with a dark homepage banner image that allows for the logo/nav/social to "float" in the header on top of it, and I can achieve this effect easily enough by setting the Header: Layout settings to "bottom".  For the interior pages, however, the banner images are not able to accommodate the logo/nav/social so I would like to have that content contained in a visible header bar, with the banner image beneath.

I've looked through the forums here and found things that are similar to what I'm looking for, but not quite. I tried to execute something from a forum that used both JS and CSS, but it was trying to accomplish slightly different things. It didn't seem to have any effect, and I'm sure I messed something up along the way. I'm using some custom coding on this site, but I don't have a lot of experience with it. Hoping there's a relatively simple solution or, failing that, a complex one that's relatively easy to replicate on this site.

Thanks in advance for any insight you might be able to offer,

Edited by MichaelG_2001
Link to comment
For the record, Tuan Phan's solution to this was simple and worked perfectly.

Add to Home > Design > Custom CSS

body:not(.homepage) header.Header.Header--bottom {
    background: #201813;
    position: relative !important;
body:not(.homepage) header.Header.Header--bottom>div {
    padding-bottom: 13px;
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.