Archived topic
Add Widget to Header inline with Menu
5 replies · Started by Krempel & Co. Werbeagentur on March 14, 2022
Hello!
I'd like to create a header looking like this:
1/3 – Text (via Widget) showing opening hours
2/3 – Logo + Menu
I followed this tutorial to center the logo and put the menu items to the right: https://docs.generatepress.com/article/centering-logo-navigation/
I tried editing the Header Widget and Top Bar widget. But none of those was really what I wanted. (Header widget puts the text on the right side, how do I move it over to the left?)
I hope there is a easy solution to this :)
Regards,
Maurice
Hi there,
if you can remove any custom CSS you added so far. And can you share a link where i can see the header with your logo / menu and header widget ?
Hello David, thank you for your quick response.
I have removed the custom CSS having an impact on the header.
I included a link for viewing the page in the private information.
Thanks!
Try adding this CSS:
/* move widget to first in flex row */
.nav-float-right .header-widget {
order: -1;
margin-left: 0;
}
/* Force navigation and widget to fill equal space */
.nav-float-right .header-widget,
.nav-float-right #site-navigation {
flex: 1 0;
}
/* force navigation to align right */
.main-navigation .inside-navigation {
justify-content: flex-end;
}
/* Give logo a litte space around */
.site-logo {
margin: 0 10px;
}That seems to work out fine! Thank you David! :)
Awesome - you just need to consider what happens at smaller screen sizes - so you will need some @media queries
Glad to be of help
