[Resolved] Moving the search icon in mobile header

Home Forums Support Moving the search icon in mobile header

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #984375
    Sam

    Hello,

    Recently the search logo on our site’s mobile header has centered behind the logo. I’m currently using this code to modify the positioning on the mobile header:

    #mobile-header .site-logo {
        position: absolute;
        left: calc( 50% - 90px); /* 50% from the left - half your image width */
    }
    
    #mobile-header button.menu-toggle {
        position: absolute;
        right: 0;
    }

    Is there a way to make the search icon left-aligned in the mobile header?

    Thanks!

    #984396
    Leo
    Staff
    Customer Support

    Hi there,

    I think a slick-looking solution would be the following:

    – Remove the CSS you are using above.

    – Add this CSS:

    .main-navigation .mobile-bar-items {
        -webkit-box-ordinal-group: 0;
            -ms-flex-order: -1;
                order: -1;
    }
    .site-logo.mobile-header-logo {
        margin-left: auto;
    }
    .main-navigation.has-branding .menu-toggle {
        padding-right: 7px;
    }

    – Remove the mobile menu label so there is only the toggle:
    https://docs.generatepress.com/article/mobile-menu-label/

    The end result should be this:
    https://www.screencast.com/t/qOPCosvB

    Let me know if this helps 🙂

    #984403
    Sam

    Thanks! Looks great

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