[Support request] Dividing header or top bar into segments

[EG]

Hi there,
Is there any way to divide the top bar and header into segments with certain length (i.e 3 segments with 50%, 30%,20% of the container) and place different widgets in each of them.

Thanks,
EG

[Tom]

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.

[EG]

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

[Tom]

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 🙂

[Jamie]

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.

[Ying]

Hi Jamie,

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

You can use the private information field.

Thanks!

[Jamie]

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

[Elvin]

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.

[Jamie]

Hi Elvin,

Yes, I can start a new topic.

Thanks, Jamie

[Elvin]

No problem. 😀

[Author]

Posts