Transparent Header – header and content overlap

  • OsakaWebbie

    (@osakawebbie)


    10 months, 4 weeks ago

    I apparently don’t understand the Transparent Header option. I want a continuous background photo behind the header and to the sides of the white content/article area, and Transparent Header does that. But when it is enabled, the header is set to “position:relative”, which allows the element below it (div#content) to flow underneath. div#primary has a top margin of 4em, but my header content (logo, title, and tagline) is much taller than that. For the moment, I added the following custom CSS:

    .ast-theme-transparent-header #masthead { position:relative; }
    .ast-separate-container #primary { margin-top: 0; }

    Am I asking for trouble monkeying with it like that? I feel like I’m not using the feature properly somehow. I’d be interested to know how other people utilize Transparent Header in a pleasing way without overriding its default behavior.

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Aradhy Singh

    (@bsfaradhy)

    10 months, 3 weeks ago

    Hi @osakawebbie,

    The Transparent Header feature is meant to let your background image show through the header area, but it can sometimes lead to content overlap if the header height isn’t properly accounted for. When enabled, it shifts the page content upward to align under the transparent header, which can look off depending on your design.

    I checked your site and everything appears fine on my end. That said, it would really help if you could share a screenshot showing how the header appears on your side, along with how you’d ideally like it to look. That’ll give us a clearer idea of what’s happening and how we can assist.

    Kind regards,
    Aradhy 😊

    Thread Starter OsakaWebbie

    (@osakawebbie)

    10 months, 3 weeks ago

    Aradhy, the reason it looks okay at the moment is because I added the custom CSS I shared in my first post. My question is whether that’s a safe and acceptable way to handle it (particularly, the position:relative) or if there is some other approach that you would recommend instead. Since it’s obvious that Transparent Header is designed with the expectation of position:absolute, I’m concerned that there might be side effects I’m not currently seeing (e.g. in certain viewport widths, or if other settings in the theme are chosen, or if I add widgets to the header, etc.).

    Aradhy Singh

    (@bsfaradhy)

    10 months, 3 weeks ago

    Hi @osakawebbie,

    Yes, using custom CSS is a perfectly valid way to handle this. Just keep in mind that if you add more elements to the header or make design changes later, you may need to adjust the CSS accordingly.

    Hope that helps!

    Kind regards,
    Aradhy 😊

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Transparent Header – header and content overlap’ is closed to new replies.