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,

Link to comment
  • Replies 2
  • Views 443
  • Created
  • Last Reply
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


This topic is now archived and is closed to further replies.

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