[Resolved] Bring Search Bar to the left of the menu (Secondary navigation)

[Clémence]

Hi team,

I’ve just switched the search bar to the secondary navigation as explained in your article and now I would like to switch it to the left of the secondary menu so that when we click it it doesn’t overlap with the menu.
I’ve tried to look through the forum but I’m not quite sure how to do it. Let me know if you can help!

Best,
Clemence

[David]

Hi there,

try adding this CSS:

@media(min-width: 769px) {
    .secondary-navigation {
        width: 100%;
    }

    .secondary-navigation .main-nav {
        order: 10;
        margin-right: unset;
    }

    .secondary-navigation .navigation-search {
        position: relative;
        width: auto;
        margin-right: 0;
    }
}

[Clémence]

Awesome, it works perfectly!

And just to double check before I add custom CSS, the height of the search bar cannot be set in the customizer, right?

Cheers,
Clemence

[David]

No it cannot be set in the Customizer it requires CSS.
Let us know if you need assistance with that.

[Clémence]

Noted,

This is thankfully in my skillset haha, thanks for the help!

[David]

Glad to be of help 🙂

[Author]

Posts