[Support request] How to add 2 header widgets horizontally

[Nadezhda]

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.

[David]

Hi there,

can you provide a link to your site with the two widgets in place so i can take a look?

[Nadezhda]

https://rossagroimport.ru/

Sorry

[David]

No problems 🙂

Try this CSS:

@media(min-width: 1024px) {
    .header-widget {
        display: flex;
    }
    .header-widget .widget:first-of-type {
        margin-right: 20px;
    }
}

[Nadezhda]

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?

[David]

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;
    }
}

[Nadezhda]

Thank you so much! I copied it. You have already helped me on other sites many times, but for some reason new tasks appear.

[David]

Is that working for you ?

[Nadezhda]

Yes it works. You helped me a lot. I haven’t met the best support on the Internet. Sincerely. Thanks!

[David]

Glad to hear that ! And happy to be of help

[Author]

Posts