[Resolved] Cannot Place Main Content over Header

Home Forums Support [Resolved] Cannot Place Main Content over Header

Home Forums Support Cannot Place Main Content over Header

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #46957
    Michael

    Hello,

    I am trying to have the main content of the blog overlap the header by a margin-top offset, using the generate_before/after_main_content action hooks.

    The effect is to place this div container:

    <div id="content-lift"></div>

    just inside the <main> container. This div contains the following CSS:

    margin-top: -80px;
    z-index: 1;

    This didn’t work on it’s own, so I tried to ensure the z-order was correct by creating another div container and enclosing the header in that:

    <div id="unfix-header"> <header></header> </div>

    That div contained the following CSS:

    z-index: 0;

    I don’t understand why the header image continues to be on top despite these changes.

    #46958
    Tom
    Lead Developer
    Lead Developer

    Can you possibly link me to the site where you’re trying this so I can see exactly what’s not working and offer a solution?

    Thanks!

    #46963
    Michael

    Sure. Could I send it to you privately?

    #46964
    Tom
    Lead Developer
    Lead Developer

    Absolutely – support@generatepress.com

    #46966
    Michael

    Thank you. I’ve sent you a link.

    #46969
    Tom
    Lead Developer
    Lead Developer

    Ah – add position:relative to your #content-life CSS – z-index needs the element to be relative in order to work.

    That should do it.

    #46971
    Michael

    Beautiful! It’s always those small details that get me. Thanks, Tom. Have a lovely day.

    #47010
    Tom
    Lead Developer
    Lead Developer

    Happy I could help 🙂

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.