[Resolved] How to have main content overlap header like in "Mellow"?

[Alex]

Hi there,

thanks so much for all the support you give in this forum. I can find answers to almost all questions just by digging through it.

I do have one question remaining: How can I have the main content overlap the header like you did in the “Mellow” site demo?
See here: https://gpsites.co/mellow/

Even before seeing Mellow I went with:

.separate-containers .inside-article {
    margin-top: -60px;
}

Which worked nice and also left the sidebar below the header which I liked – but this also squished up my Masonry Blog layout.

I inspected the living hell out of the “Mellow” demo – but I cannot figure it out. Could you please give me a little nudge in the right direction?

Cheers

Alex

/edited to include the link to the Mellow demo which I left out before

[David]

Hi there,

Mellow uses this CSS:

@media (min-width: 769px) {
    .page-hero + #page {
        margin-top: -100px;
    }
}

Which basically neg margins the #page container when a page hero is present.

[Alex]

Hi David,

thank you for your quick reply. Works great.
And I need to improve my inspections skills. ;-P

Cheers

Alex

[David]

Haha you’re welcome. It’s easier for me, i knew where to look 🙂

[Author]

Posts