Archived topic

Mobile menu experience

5 replies · Started by Steven on August 12, 2019

Viewing posts 1–6 of 6

August 12, 2019 at 4:44 pm #982479

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 #982502

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!

August 13, 2019 at 9:11 am #983166

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

August 13, 2019 at 4:34 pm #983491

What if we do something like this?:

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

August 13, 2019 at 5:25 pm #983519

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 #984157

We'll definitely look at ways to improve this by default on mobile :)

This archived topic is closed to new replies.

Start building better websites today.