[Resolved] Mobile menu experience

Home Forums Support Mobile menu experience

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #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.

    #982502
    Tom
    Lead Developer
    Lead Developer

    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!

    #983166
    Steven
    #983491
    Tom
    Lead Developer
    Lead Developer

    What if we do something like this?:

    .navigation-search.nav-search-active {
        max-width: calc(100% - 120px);
    }
    #983519
    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);
    }
    #984157
    Tom
    Lead Developer
    Lead Developer

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

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.