Mobile Menu/Navigation Help

Solved
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)

Accepted Solutions
LitExtension
Shopify Partner
1959 324 395

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 - #1 Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Are you looking for a solution to migrate to Shopify? Contact us for further assistance.
Try our FREE DEMO now!

View solution in original post

Replies 8 (8)
LitExtension
Shopify Partner
1959 324 395

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 - #1 Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Are you looking for a solution to migrate to Shopify? Contact us for further assistance.
Try our FREE DEMO now!
Thehumblebee
Tourist
7 0 2

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

LitExtension
Shopify Partner
1959 324 395

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 - #1 Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Are you looking for a solution to migrate to Shopify? Contact us for further assistance.
Try our FREE DEMO now!
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
1959 324 395

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 - #1 Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Are you looking for a solution to migrate to Shopify? Contact us for further assistance.
Try our FREE DEMO now!
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
1959 324 395

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 - #1 Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Are you looking for a solution to migrate to Shopify? Contact us for further assistance.
Try our FREE DEMO now!

View solution in original post

Thehumblebee
Tourist
7 0 2

That did the trick, thank you so much!