Happening now! Shopify Community AMA: PayPal Express Migration to Shopify Payments | Ask your questions to be answered by our team.

Re: Mobile Menu/Navigation Help

Solved

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

Thehumblebee
Tourist
7 0 2

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

Accepted Solution (1)
LitExtension
Shopify Partner
4860 1002 1160

This is an accepted solution.

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.

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify

View solution in original post

Replies 13 (13)

LitExtension
Shopify Partner
4860 1002 1160

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!

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
Thehumblebee
Tourist
7 0 2

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

LitExtension
Shopify Partner
4860 1002 1160

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!

 

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
Thehumblebee
Tourist
7 0 2

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.

LitExtension
Shopify Partner
4860 1002 1160

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 

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
Thehumblebee
Tourist
7 0 2

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

LitExtension
Shopify Partner
4860 1002 1160

This is an accepted solution.

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.

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
Thehumblebee
Tourist
7 0 2

That did the trick, thank you so much!

Janani
New Member
5 0 0

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

LitExtension
Shopify Partner
4860 1002 1160

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.

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
Janani
New Member
5 0 0

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

https://community.shopify.com/c/technical-q-a/auto-visible-submenus-in-mobile-view/td-p/1687695

Looking forward to your response. Thankyou.

vlasis9
Visitor
3 0 0

hello sir

in the mobile version of my site,menu cant load

https://evdc.networkphoto_2022-12-28_18-49-07.jpg

vlasis9
Visitor
3 0 0