[Support request] Horizontal Spacing of Header Widgets

[Mark]

Hi,

I have added 2 header widgets (lightweight Social icons and an Image) and used this CSS code to align them horizontally:

.header-widget .widget {
display: inline-block;
vertical-align: top;
}

But now I need to space the 2 widgets out as they are flush next to each other. How do I move the 1st widget (Image) to pretty much the center of the header (logo to the left) and the widget with Social icons remain to the right?

Thank you!

[Leo]

Hi Mark,

The best way would be to split the header in 3. Try this: https://generatepress.com/forums/topic/logo-search/#post-316731

[Mark]

I was staying away from this method as it produced strange results on mobile, but I may have done it wrong. I’ll try again. I was thinking aligning the widgets and adding a little space between would be the easiest, but let me give the header splitting another shot.

Thanks Leo

[Leo]

If we simply add some padding to the widget then I think it won’t be responsive at different screen width.

The hide-on-mobile and hide-on-tablet classes might come in handy if you want to hide specific widgets on mobile.

Let me know if you need more info 🙂

[Tom]

If you want to use your first method, you can just space them apart:

.header-widget .widget {
    display: inline-block;
    vertical-align: top;
}

.header-widget .widget:not(:last-child) {
    margin-right: 30px;
}

[healthycoins]

I am struggling to find the hide on mobile for my top bar. Could someone enlighten me. Thank you so much in advance.

[Leo]

Hi there,

To hide the top bar on mobile? Try this CSS:

@media (max-width: 768px) {
    .top-bar {
        display: none;
    }
}

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

[healthycoins]

BINGO!!!!! Thank you

[Leo]

No problem!

[İsmihan]

hello I am using a site settings from the library. When I add the code, it still appears on the mobile po bar menu

[David]

Hi there,

can you raise a new topic where you can share a link to your site and explain what you want changing.

[Author]

Posts