Archived topic
Reorder Mobile Icons, Search Field Tweaks
5 replies · Started by Atmostfear on June 13, 2021
Dear friends,
Currently our mobile header displays this way:
What we wish to alter, is to have the Cart Icon on the Search Icon position, and vice-versa, meaning, the Search Icon takes the position of the Cart Icon, switching them both.
Also, when we click to open the Search, it displays this way:
We would like to adjust it so that it covers the entire header, as of now, the X stays far from the right of the screen.
You may check the site live here.
Any help would be appreciated.
Hi there,
Try this CSS:
@media (max-width: 768px) {
.main-navigation .menu-bar-items {
flex-direction: row-reverse;
}
.main-navigation .menu-bar-item.search-item.active.close-search {
position: absolute;
right: 0;
}
}Adding CSS: https://docs.generatepress.com/article/adding-css/
Let me know if this helps :)
Hello Leo,
It reversed the order, however, the search field got even more afar from the right of the screen.
It would be better for us to go full width.
Thank you.
There was a syntax error in my previous CSS above. Please give it another shot:
https://generatepress.com/forums/topic/reorder-mobile-icons-search-field-tweaks/#post-1820926
Let me know :)
Hello Leo,
Now it worked out perfectly.
Thank you.
No problem :)
