[Resolved] Mobile menu experience

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

[Tom]

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

[Steven]

Test site: https://cityofbellingh.wpengine.com
GIF of the issue we’re seeing: https://cityofbellingh.wpengine.com/wp-content/uploads/search-overlap.gif

[Tom]

What if we do something like this?:

.navigation-search.nav-search-active {
    max-width: calc(100% - 120px);
}

[Steven]

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);
}

[Tom]

We’ll definitely look at ways to improve this by default on mobile 🙂

[Author]

Posts