- This topic has 5 replies, 2 voices, and was last updated 1 year, 6 months ago by
Tom.
-
AuthorPosts
-
August 12, 2019 at 4:44 pm #982479
Steven
A few items we saw while trying out the different configs for the mobile menu in GP.
1) The search terms overflow on top of the search close icon. It would be great to have them constrained to the left of the search icon. Could also consider floating the search close icon all the way to the right when the search input is toggled open.
2) When the menu icon is toggled open, it would be great to have it toggle closed automatically when the search icon is selected to toggle open. That would help prevent user confusion between search results and menu items when using a live search box.
3) Have you thought about offering the option to move the search bar into the menu like Apple’s mobile menu?
Thanks for considering the above.
August 12, 2019 at 5:24 pm #982502Tom
Lead DeveloperLead DeveloperHi there,
1. This sounds like something is wrong on your side – can you link me to your site?
2. I think this is worth playing with – I’ve made a note.
3. This would be pretty cool. It would be easy to do with a little custom code as well. I’ll play with this as well.
Thanks!
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentAugust 13, 2019 at 9:11 am #983166Steven
Test site: https://cityofbellingh.wpengine.com
GIF of the issue we’re seeing: https://cityofbellingh.wpengine.com/wp-content/uploads/search-overlap.gifAugust 13, 2019 at 4:34 pm #983491Tom
Lead DeveloperLead DeveloperWhat if we do something like this?:
.navigation-search.nav-search-active { max-width: calc(100% - 120px); }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentAugust 13, 2019 at 5:25 pm #983519Steven
Thanks for the quick response! That’s what we needed. Is this something that might need to be included by default in the theme? I don’t think I customized anything that would have affected this.
I ended up going with the following because the full width search bar on ultra-wide screens places the cursor clear across the other side of the screen when the search icon is activated.
@media (max-width: 768px) { .navigation-search.nav-search-active {max-width:calc(100% - 120px);} } @media (min-width: 769px) { .navigation-search.nav-search-active { max-width:calc(50% - 120px); left:calc(50% + 60px); } } @media (min-width: 1400px) { .navigation-search.nav-search-active { max-width:calc(30% - 120px); left:calc(70% + 60px); }
August 14, 2019 at 9:25 am #984157Tom
Lead DeveloperLead DeveloperWe’ll definitely look at ways to improve this by default on mobile 🙂
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development -
AuthorPosts
- You must be logged in to reply to this topic.