Archived topic
How to add 2 header widgets horizontally
9 replies · Started by Nadezhda on October 4, 2020
Hello! I added a search to the header, and it stood over the widget with contacts. Can't find a solution how to move the search to the left.
Hi there,
can you provide a link to your site with the two widgets in place so i can take a look?
No problems :)
Try this CSS:
@media(min-width: 1024px) {
.header-widget {
display: flex;
}
.header-widget .widget:first-of-type {
margin-right: 20px;
}
}Yes, it worked out. Thank you so much! And if the search box is centered, do you need to use this https://docs.generatepress.com/article/split-header-three-sections/ or are there simpler solutions?
Do you want the layout to be:
Logo | Search | Other Widget with the search in the center ?
If so re-order the Widgets so the search comes first.
Then replace the CSS i provide above with this:
@media(min-width: 1024px) {
.header-widget {
display: flex;
align-items: center;
max-width: unset;
width: calc(100% - 400px);
}
.header-widget .widget:first-of-type {
margin-right: auto;
margin-left: auto;
padding-bottom: 0 !important;
}
}Thank you so much! I copied it. You have already helped me on other sites many times, but for some reason new tasks appear.
Is that working for you ?
Yes it works. You helped me a lot. I haven't met the best support on the Internet. Sincerely. Thanks!
Glad to hear that ! And happy to be of help
