Dropdown menu open by default on mobile?

Question

I've run into a strange issue where (only on the Shopify site after conversion) a dropdown menu item seems to be open by default. On Desktop it's perfectly fine, it's just at 991px breakpoint and below. (The empty dropdowns in the menu on desktop are because we're trying to get mega menus to work)

Here's a webflow read-only link to see that it's working pre-conversion: https://preview.webflow.com/preview/theprintgarage?utm_medium=preview_link&utm_source=designer&utm_content=theprintgarage&preview=2e903db79948c9938579805d4b825151&workflow=preview

Thank you in advance for your help.

jonas.halbstark · Answer

Hi @Rowan, can you also send me the shopify link?

Rowan · Answer

Hey @jonas.halbstark I’ve had to set up a staging Shopify site. Let me know if this link works for you: https://theprintgarage-cardowandco.myshopify.com/passwordif you need a password: regal

jonas.halbstark · Answer

It Looks like menu is always set to felx. and not to display none. But its cart tu till via the read only link.

Rowan · Answer

Oh okay. What would you need to be more sure of what’s causing the problem, @jonas.halbstark ?

jonas.halbstark · Answer

To solve ot i would need access to the project. If you want you can add me as a freelancer gust to your workspace. This mail: jonas@halbstark.de

Rowan · Answer

@jonas.halbstark any luck?

jonas.halbstark · Answer

Sorry.. got ditracted. So the main problem ist, that you have li-section on the nabar element itself. Webflow ads a lot of attributes to the navbar elemets which shopify cant render. So you need to wrap the navbar elemt inside a div and add the li-section there. I made an example inside your webflow project (Section / Navbar-New).

Rowan · Answer

thank you so much. Did everything else in your example navbar stay the same? So I can just use the one you made?

jonas.halbstark · Answer

i only made one change here. The first attribute created an syntax error

jonas.halbstark · Answer

that was one title element inside the service tab

Rowan · Answer

ah okay, thank you.probably from testing for starting to work out how to set up a mega menu.. any tips?

jonas.halbstark · Answer

maybe this example helps you: https://preview.webflow.com/preview/aqon-pure-f9dca8?utm_medium=preview_link&utm_source=designer&utm_content=aqon-pure-f9dca8&preview=2e903db79948c9938579805d4b825151&pageId=66fd32484d6fc7fe9a42dcbe&locale=en&workflow=preview

jonas.halbstark · Answer

we work with prefixes in the navigation to make diffrent layouts possible

jonas.halbstark · Answer

depending on the number we display diffrent kinds of dropdowns

Welcome to the Liquify Community

Dropdown menu open by default on mobile?