Building a home page template with a full width header (2022)

  • I’m trying to build a home page template with a full width header using the Twenty Twenty-Two theme. But I can’t make the header and the cover image span the full width.

    How do I go about it? My group contains a cover. In the group settings, Inner blocks use content width is toggled to on.

    Here’s my site header in Preview mode.

    But as you see, the block is not nearly full width.

    What’s wrong? How do I fix it?

    I’ve previously posted in the 2022 forum but did not receive a response.

    Thanks.

Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter akubrin

    (@akubrin)

    Wow, thanks, @calc20 !

    One additional question: do I set up the block and cover in the page or in a template?

    Thank you!

    You can set up the block and cover either in a page or in a template, depending on your needs:

    • In a Page: If you want a unique layout for a specific page (like the homepage), you can directly add and configure the blocks in that page.
    • In a Template: If you want a consistent layout across multiple pages (e.g., all blog posts or specific sections of your site), setting it up in a template would be better. This allows you to maintain a uniform design throughout your site.

    Choose the option that best fits your design goals!

    Thread Starter akubrin

    (@akubrin)

    Hi @calc20,

    Thank you for these explanations and the code. For my site, working in a template makes sense, since I plan to replicate the same layout across multiple pages.

    I made these changes to Page (Large Header) and added your code to Additional CSS. But the Cover and nav are still not full width. I also seem to have ended up with some extra pieces.

    Here is a preview of my Home page, which is based on Page (Large Header):

    View post on imgur.com

    Here is the list view of my Page (Large Header) template:

    View post on imgur.com

    I think I need to delete the first Cover (outlined in red) and move the second cover (outlined in blue) into the Row containing the Site Logo and Nav. I also need to somehow insert text into the second Cover.

    Does that sound right?

    Thread Starter akubrin

    (@akubrin)

    @calc20, somehow my header is broken. The site icon and the nav are now appearing to the left of the cover image.

    Here is the way it currently looks in the Inspector:

    View post on imgur.com

    Here’s my CSS code for the whole site:

    /* 8-10-2024 @calc20 code from wp forum */
    .wp-block-group.is-full-width, .wp-block-cover {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100vw !important;
    max-width: 100% !important;
    }
    /* set footer height */
    .site-footer { padding-top: 20px; padding-bottom: 20px; }
    /* make row span full width, adjust and remove default padding*/
    .wp-block-group.has-background { width: 100%; padding-left: 0; padding-right: 0; }
    /* center footer nav */
    .wp-block-group.has-background { display: flex; justify-content: space-between; align-items: center; } .wp-block-navigation { flex-grow: 1; display: flex; justify-content: center; }

    Can you explain what has gone wrong?

    Thank you.

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

Tags