Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
MichaelG_2001

Creating a transparent homepage header with solid bar interior headers

Question

Posted (edited)

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,
Michael

Edited by MichaelG_2001

Share this post


Link to post

2 answers to this question

Recommended Posts

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

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...