Archived topic
search icon placement on mobile
3 replies · Started by Robin on July 5, 2020
Using Off-canvas panel only for navigation, and I'd like the search icon (magnifying glass) to stay in the same place on desktop, tablet, and smartphone.
Is that possible?
Hi there,
add this CSS to your site:
#mobile-header .mobile-bar-items {
order: 4;
}Thank you.
Are there also orders designated as 1, 2, 3? And if so, what are they?
In the default mobile header layout when Search is enabled - there are 4 elements.
Logo: 1
Mobile Bar Items ( Search Icon ): 2
Hamburger: 3
Mobile Menu: 4
You will note that Mobile Bar and Mobile Menu now both have order: 4;. As mobile bar comes first as it is before the menu in sites HTML.
This works because the Mobile Header is set up using CSS Flexbox - of which the order property is one of its features.
