Archived topic
How to have main content overlap header like in "Mellow"?
3 replies · Started by Alex on December 7, 2018
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
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.
Hi David,
thank you for your quick reply. Works great.
And I need to improve my inspections skills. ;-P
Cheers
Alex
Haha you're welcome. It's easier for me, i knew where to look :)
