[Resolved] Moving the search icon in mobile header

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

[Leo]

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 🙂

[Sam]

Thanks! Looks great

[Leo]

No problem 🙂

[Author]

Posts