[Resolved] Header Widget Capabilities

[brians]

Hi Tom,

How difficult would it be to change the header to a widgetized capability?

I have made some sites where they want two header widget areas side by side plus the logo. I’ve made others where they want their logo and the business name underneath.

So I didn’t know if it would be an extra feature capability that could be setup like the following for the header:

Logo + 1 Widget
Logo + 2 Widgets
3 Widgets

That way it gives a total of three widget areas – and two of those options would keep the logo option under “Site Identity”.

Hopefully that makes sense 🙂

[Leo]

Hi there,

Hmm the header already has a header widget area: https://docs.generatepress.com/article/header-widget/

You can insert as many widgets as you want.

For three widgets in header, perhaps this method is useful to you?
https://docs.generatepress.com/article/split-header-three-sections/

Let me know if this helps 🙂

[brians]

The information you sent works, but it definitely requires extra steps compared to an actual built-in feature that would do this automatically.

As an example, under Layout -> Footer, you can choose how many widgets you want in the footer. If something similar could be done for the header, and then actual widgets used instead of GP Hooks, that would be pretty nice.

[Leo]

Hmm usually people use global setting for header so all the widget shows.

We will keep the suggestion in mind though 🙂

Let me know if you need more help on this.

[brians]

Correct – but with the current theme, there is a spot to put the logo (under the Site Identity) and then only a spot for one header widget. If there is the ability to add an option under the Layout -> Header section to choose how many widgets for the header – something like:

Logo + 1 Widget
Logo + 2 Widgets
3 Widgets

That would allow for a great deal of flexibility 🙂

[Leo]

You can already add multiple widgets in the header widget area.

They should all show up just stack on top of each other.

[brians]

Yep, as you said – they will stack on top of one another. But like was mentioned in the prior article, there was one to create two header widgets side-by-side plus the logo by using GP Hooks and the coding.

[Leo]

We can also a little bit of CSS to un-stack them.

The hook method is only necessary if you want to divide them into even space.

Now I think about it we can also use flexbox for that I believe 🙂

[Terry]

Flexbox works great, just add this css:

.header-widget {
	display: flex;
	justify-content: flex-end;
	flex-flow: row wrap;
}
And you can handle each child with:

.header-widget aside:nth-child(1) {
flex-basis: 50%;
margin-right: 10px;
}
I’ve got 3 header widgets side by side on my site, http://ras2.teebark.com
Flexbox also makes the widgets responsive, so on a phone they’re vertical.

[Leo]

Thanks for sharing!

[Author]

Posts