[Resolved] Is it possible to customize the header with widgets?

[Mario]

I wonder to know whether is possible or not to customize the header. I mean, I would like to have three widgets in the header area: the one on the left with the logo of the webpage, the middle one with the social media buttons and the right one with a search area.

Can it be done in GP?

Is there any alternative to customize this part of the web?
Thanks

[Leo]

Hi Mario,

This should help: https://generatepress.com/forums/topic/2-sides-to-the-header-widget/#post-228923

Let me know.

[Mario]

Hi Leo,

Thanks for your link.
I checked it out, but I did not succeed.

I used this code and the only thing I can see are the social buttons. You can also check it in http://www.vivaelsoftwarelibre.com

[widget id=”essbsocialprofileswidget-2″]

[widget id=”search-2″]

Thanks for your help and any comment would be appreciated.

[Leo]

Try going to Customizer > Colors > Header > Background and set it Transparent (remove hex code).

Let me know.

[Mario]

Hi again,

Right. Now they are visible, but a clear problem in the alignment is seen, as they are not vertically centered. How can I solve it?
Moreover, how can I add a white color as background while these “widgets” are visible?

[Leo]

Ok add this CSS first to align them all vertically:

div#essbsocialprofileswidget-2 {
    padding: 0px;
}

Do you want any padding on top and bottom of your logo?

[Lyle]

Mario, Leo,

Here is a way to do it with CSS that I posted a little while back here:

https://generatepress.com/forums/topic/columns-in-the-header/#post-264133

To update that for this situation, here is what I used for the text widgets, using also the Widget Shortcode plugin:

<div id="hdr-search">[widget id="search-3"]</div>

<div id="hdr-social">[widget id="lsi_widget-2"]</div>

And here is the CSS:

#hdr-search {
    margin-top: 27px;
    width: 300px;
    float: right;
}

#hdr-social {
	margin-top: -12px;
    font-size: 28px;
    margin-left: 50px;
}

.header-widget {
    width: 70%;
        max-width: 80%;
}

As noted in the linked post, additional CSS will be required for it to work/look good on mobile, but this works fine for desktop 🙂

Cheers!
Lyle

[Mario]

Thanks to all. It’s been very helpful.

Now you can check in the web (www.vivaelsoftwarelibre.com).

However, how can I add a background color (white) to the header?
Thanks

[Leo]

This CSS should work:

body .header-left, body .header-center {
    background-color: #ffffff;
}

However, if all you want in the header is a logo image and a social icon widget, then you can just use the customizer options so you can modify the layout, color etc easily.

Try the following:
– Upload logo in Customizer > Site Identity
– Customizer > Layout > Header > Header Width/Inner Header Width > Full
– Customizer > Layout > Header > Header Alignment > Center
– Customizer > Colors > Header > Background > #ffffff
– Add social icon widget in Dashboard > Appearance > Widgets > Header

Let me know.

[Mario]

Dear Leo,
I copy/pasted your code, and it practically works fine. As you can see, there is still a gray line below the header. How can I unify background color in the full header?

I will also check your second option.

[Leo]

Do you still need the CSS to remove that gray line?

Looks like option 2 is working better for you?

[Mario]

Yeah, sure.

Thanks for your help Leo and Lyle!

[Leo]

Glad we can help!

[Author]

Posts