[Resolved] How to make content after header overlap header element

[mkjj]

Our designer wants 3 boxes after the header element and overlapping it like so. I created a grid in the main content area and gave the wrapper a negative margin:

}
@media (min-width: 850px) {
.three-col-grid {
    display: grid;
    grid-auto-rows: 1fr;
    grid-template-columns: 1fr 1fr 1fr;
    margin-top: -45px;
    max-width: 1150px;
}
}

It works, but it feels a little bit dirty. Do you think, this is an acceptable approach? How would you do it? Please, enjoy your easter monday. This post is by no means important.

Thanks, Mike

[David]

Hi there,

i am glad its not just me that finds negative margins ” a little bit dirty ”
But i try to get over myself for that :), as its a perfectly valid and acceptable method and it is the most straight forward way to do it.

To stop the hero from background overlapping that content you may need to reset the #page stacking context with this CSS:

#page {
    position: relative;
}

As negative margins can mess that up and get hidden behind the container above them.

[mkjj]

Thanks David! If it’s ok with you, it’s ok for me. 🙂 Have a nice day!

[David]

Glad to be of help. And you too!

[Author]

Posts