[Resolved] Header Element Full Width + Contained DIV

[Paul]

Hi,

How can I recreate the header layout here using elements?
https://www.ncsc.gov.uk/cyberaware/home

I think the container and inner container need to be set to full width, with a new contained div added to create the text introduction area – it’s that part that I’m struggling with, especially alignment.

Thanks,
Paul.

[David]

Hi there,

first create a Header Element for the full width section:

https://docs.generatepress.com/article/header-element-overview/

Then add this CSS to pull the page content over the header element:

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

[Paul]

Hi David,

Thanks but I’m struggling to keep the space above and below the page title consistent. I can increase the bottom padding value of the header element to match the margin-top value above but it’s not perfect. No way to do this without using a negative margin?

I did want to add a lead paragraph into the header element where the page content now begins. I know you could just style the first paragraph using the block editor but I’d rather do that with css.

https://style960.com/sites/nerccu/contact/

Thanks,
Paul.

[David]

Theres no easier way to do that other than use negative margins.
To keep it more uniform change the (min-width: 1024px) to 769px this will maintain the overlap on tablet and desktop.
For the mobile device you reduce the Header Elements bottom padding.

[Paul]

I got the result I wanted by using the generate_after_header hook and applying a negative margin to the content. Then added a bottom margin to the H1. Also had to set the container padding to top 0px (re-added default values for homepage).

https://style960.com/sites/nerccu/about/

Thanks for getting me on the right track.
Paul.

[David]

Nice method ! Thanks for sharing

[Author]

Posts