[Resolved] Header widget padding and placement in mobile

[Traci]

Based on other topics, I got my Polylang language switcher and the Lightweight Social Icons widget to display the way I want them in the header. Now I have a lot of padding in the header because of the widgets. How do I decrease the padding (top and bottom)?

Also, when I look at the site on a mobile device, the logo is beneath the widgets. How do I switch them?

[Leo]

Hi there,

Try this CSS:

.separate-containers .widget {
    margin-bottom: 0px;
}
.header-widget .widget {
    padding-bottom: 0px;
}

Header widget below logo on mobile: https://docs.generatepress.com/article/header-widget/#showing-your-header-widget-below-other-header-elements-on-mobile

Adding CSS: https://docs.generatepress.com/article/adding-css/

[Traci]

Perfect! It all looks exactly the way I want it to now.

Thanks so much for the amazingly quick reply.

[Leo]

No problem 🙂

[Author]

Posts