Dividing header or top bar into segments

To do this in the header, you'd likely need to replace the header element with your own header element.

To do this, you could:

1. Create a new Hook Element: https://docs.generatepress.com/article/hooks-element-overview/
2. Set the hook to header and check the "Disable Site Header" checkbox.
3. In your content area, add this:

<div class="header-section">
    <div class="header-section-1">
        Content for first section
    </div>

    <div class="header-section-2">
        Content for second section
    </div>

    <div class="header-section-3">
        Content for third section
    </div>
</div>

Now you just need a little CSS:

.header-section {
    display: flex;
}

.header-section > div {
    width: 33.33333%;
}

@media (max-width: 768px) {
    .header-section > div {
        width: 100%;
    }
}

Depending on your browser requirements, you might want to run that code through this tool: https://autoprefixer.github.io/

To add widgets in those sections, you could use a plugin like this: https://wordpress.org/plugins/widget-shortcode/

Then be sure to check the "Execute Shortcodes" checkbox as well.

Thank you Tom. Is there any way to divide the header into segments with different lengths (like first segment is 50%, second 20% and third 30%), instead of having 33.333% for each?

I couldn't find the “Disable Site Header” checkbox. I added a new elements as hook then chose wp_head option. Is this the right way?

Lastly how can I contain the length of the header within the container, but full length?

Thank you, EG

1. First, remove this:

.header-section > div {
    width: 33.33333%;
}

Then add this:

.header-section-1 {
    width: 50%;
}

.header-section-2 {
    width: 20%;
}

.header-section-3 {
    width: 30%;
}

2. You'll want to select the header hook, instead of wp_head.

3. Not too sure what you mean by the length. Can you explain a bit more?

Let me know :)

I got this to work on my site but I was wondering if you could help me get the logo into the first section of the header or suggest an alternative to what I have now. the section pushed my logo down and I would like to top align them.

Hi Jamie,

Any chance you can link us to the site in question?

You can use the private information field.

Thanks!

right now for some reason the covid buttons and forms buttons are below the main menu. In a perfect world it would be a logo section then a middle section with covid buttons and then a right section with forms and licensing and UNCAS programs. I don't see the private information field

Hi Jamie,

The private information text field can only be used by the topic starter.

That said, Can you open up a new topic for this? So you could use the private information text field to provide us the site details. Thank you.

Hi Elvin,

Yes, I can start a new topic.

Thanks, Jamie

No problem. :D