[Resolved] Header Element Full Width + Contained DIV

Home Forums Support Header Element Full Width + Contained DIV

  • This topic has 5 replies, 2 voices, and was last updated 4 months ago by David.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1507705
    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.

    #1507763
    David
    Staff
    Customer Support

    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;
        }
    }
    #1508062
    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.

    #1508291
    David
    Staff
    Customer Support

    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.

    #1508616
    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.

    #1508639
    David
    Staff
    Customer Support

    Nice method ! Thanks for sharing

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