How can I optimize mobile menu navigation for better customer experience?

Technical Q&A
1

Hello, I’m trying to get my website so that nested/submenus will remain, hover to drop down, on desktop but to have them auto open when the menu tab is clicked on mobile. Currently on mobile when you click on the menu drop down the “Shop” menu is expandable but with it being a parent menu (requiring a link) often times it creates issues with customers trying to get to the drop down portion. I’d like to have it set so that when you click on the menu button it will already be expanded.

I’ve combed through the code to try and find where I could change the submenu code but I’m just lost at this point. Any help would be greatly appreciated. Thanks!

Website: www.thehumblebeeandco.com

2

Hi @Thehumblebee ,

Please follow these steps:

  • Step 1: Go to Online store > Themes > Actions > Edit code.
  • Step 2: Go to Assets > theme-collection.min.css and paste this at the bottom of the file:
@media (max-width: 720px){
	.main-navigation .navigation-dropdown-toggle {
		width: 100%;
		background: transparent;	
	}
	.main-navigation .navigation-dropdown-toggle svg{
		position: absolute !important;
		top: 50% !important;
		right: 0px !important;
		width: 50px !important;
		transform: translateY(-50%) !important;	
	}
}

Hope it helps!

3

Thanks for your assistance but that didn’t do anything.

4

Hi @Thehumblebee ,

Sorry for the confusion, you can move all the code to file: section-header.min.css

Just you need to move all the code I show to the file: section-header.min.css , it will work fine.

Hope it helps!

5

Yeah, still no change. All the code did moved to section-header was cause the top menu bar to flash when opening in mobile view. The menu still stays nested instead of expanded.

6

hi @Thehumblebee ,

I checked and the code still hasn’t been copied.
And are you wanting this: https://i.imgur.com/exy93Fm.png
You can check the link: https://thehumblebeeandco.com/collections/all

7

I removed the code because it was causing the menu header to flash from black to the button in mobile view.

The “Shop” menu you posted is a nested menu with the + allowing the submenu to drop down. I want it to be expanded automatically when you open the menu in mobile view. Shopify requires me to link the Shop to something so I linked it to all products but ideally I just want the menu to be auto expanded when you tap the button.

This would be the default view (on mobile) when you tap the menu button. https://imgur.com/a/HiBbpPD

8

Hi @Thehumblebee ,

I understood your request, go to section-header.min.css and paste this at the bottom of the file:

@media (max-width: 720px){
	.navigation-list-item>.navigation-list {
		display: block !important;
	}
}

It will display fine.

9

That did the trick, thank you so much!

10

@LitExtension Hi! I am facing the same issue in colorblock theme. I could not find section-header.min.css in my theme files to add the code. If you can guide me with the same, it would be really helpful to me. Thankyou in advance.

11

Hi @Janani ,

You can create a question on the community and send me the link. I will check it.
Because this will help build a better community.
Thank you.

12

Hi! I posted the question in the community board. Here is the link below.

https://community.shopify.com/topic/1687695

Looking forward to your response. Thankyou.

13

hello sir

in the mobile version of my site,menu cant load

https://evdc.network

photo_2022-12-28_18-49-07.jpg
photo_2022-12-28_18-49-07.jpg781×851 40.3 KB

14

@LitExtension