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

Home Forums Support Is it possible to customize the header with widgets?

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #271262
    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

    #271318
    Leo
    Staff
    Customer Support
    #271441
    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

    Viva el Software Libre
    [widget id=”essbsocialprofileswidget-2″]
    [widget id=”search-2″]

    Thanks for your help and any comment would be appreciated.

    #271444
    Leo
    Staff
    Customer Support

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

    Let me know.

    #271448
    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?

    #271460
    Leo
    Staff
    Customer Support

    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?

    #271481
    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

    http://snifflevalve.com
    Tutorials and tips for GeneratePress, WP Show Posts, WordPress and Elementor

    #271571
    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

    #271740
    Leo
    Staff
    Customer Support

    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.

    #271748
    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.

    #271756
    Leo
    Staff
    Customer Support

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

    Looks like option 2 is working better for you?

    #271759
    Mario

    Yeah, sure.

    Thanks for your help Leo and Lyle!

    #271760
    Leo
    Staff
    Customer Support
Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.