[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 ?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Jeff]

https://lannamontessori.com

[David]

Try this CSS:

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Jeff]

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

[Leo]

No problem 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts