Archived topic
Moving the search icon in mobile header
3 replies · Started by Sam on August 14, 2019
Viewing posts 1–4 of 4
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!
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 :)
Thanks! Looks great
No problem :)
This archived topic is closed to new replies.
