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

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

Home Forums Support Move search to right and menu to left on top bar

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #1555945
    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?

    #1556811
    David
    Staff
    Customer Support

    Hi there,

    can you share a link to your site ?

    #1557381
    Jeff
    #1557978
    David
    Staff
    Customer Support

    Try this CSS:

    .main-navigation .inside-navigation {
        flex-direction: row-reverse;
    }
    #1558267
    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?

    #1558570
    David
    Staff
    Customer Support

    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

    #1558577
    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.

    #1558712
    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.

    #1559157
    Leo
    Staff
    Customer Support

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

    #1559667
    Jeff

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

    #1561551
    Leo
    Staff
    Customer Support
Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.