Archived topic
Horizontal Spacing of Header Widgets
10 replies · Started by Mark on June 17, 2017
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!
Hi Mark,
The best way would be to split the header in 3. Try this: https://generatepress.com/forums/topic/logo-search/#post-316731
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
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 :)
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;
}I am struggling to find the hide on mobile for my top bar. Could someone enlighten me. Thank you so much in advance.
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/
BINGO!!!!! Thank you
No problem!
hello I am using a site settings from the library. When I add the code, it still appears on the mobile po bar menu
Hi there,
can you raise a new topic where you can share a link to your site and explain what you want changing.
