[Resolved] Move search to right and menu to left on top bar

[Jeff]

I’ve got sticky on, mobile header on, navigation as header on. When I enable search it appears on the left, instead of the right, and the menu moves over to the right. I’m centering the logo with:

/* This centers nav branding */
.navigation-branding, .site-logo {
position: absolute;
top: 0px;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
z-index: 200;
}

Any way to get search on the right and the menu on the left?

[David]

Hi there,

can you share a link to your site ?

[Jeff]

https://lannamontessori.com

[David]

Try this CSS:

.main-navigation .inside-navigation {
    flex-direction: row-reverse;
}

[Jeff]

This is great! The only thing is that the search bar text starts on the left (on top of the menu icon), rather than closer to the search icon. Any suggestions?

[David]

try this CSS:

.navigation-search.nav-search-active {
    text-align: right;
}
.navigation-search input[type="search"] {
    max-width: 400px;
}

Note – you can set the Search bar colors in Customizer > Colors > Primary Navigation

[Jeff]

That’s cool but on mobile it wraps on top of the logo or menu icon. My guess is the text-align: right isn’t working as it should, or there needs to be a starting point on the right in some other way.

[Jeff]

Ok, I added text-alighn:right to this:

.navigation-search input[type=”search”] {max-width: 200px; text-align: right;}

That works now. But, I have a problem in that when one clicks on the search icon, there is no visual queue that one can know there is a text box present and to start typing.

[Leo]

What if you change the colors under Customizer > Colors > Primary Navigation > Navigation Search?

[Jeff]

Alright, that works well. I had to add a margin to get the alignment, but this works for me. Thanks!

[Leo]

No problem 🙂

[Martins]

Hi I’m having issues moving my menu to the left on mobile, centralizing the logo title and making the search icon remain on the right. can you please help? thanks

[Martins]

Hi I’m having issues moving my menu to the left on mobile, centralizing the logo title and making the search icon remain on the right. can you please help? thanks

[Fernando]

Hi Martins,

To have a better understanding of the issue, may you kindly start a new topic and provide the link to the site in question?

You may use the private information field for this: https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

Hope to hear from you soon.

[Author]

Posts