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!
Topic summary
Goal: make mobile submenu(s) auto-expanded on mobile while keeping hover-to-dropdown behavior on desktop, to prevent the parent “Shop” link from blocking access to nested items.
-
Initial attempt: CSS targeting the mobile dropdown toggle was suggested and moved between theme files. It had no effect and caused the header to flash in mobile view.
-
Clarification: The desired mobile default is the “Shop” submenu already expanded upon opening the menu. Reference images and the site link were shared to illustrate expected behavior.
-
Resolution: Adding a CSS media query for max-width 720px in section-header.min.css to force nested lists to display block (selector: .navigation-list-item > .navigation-list) successfully auto-expanded the submenu on mobile.
-
Technical notes: CSS media queries apply styles at specific viewport widths; setting display: block !important reveals nested submenu items. Shopify’s requirement for a parent menu item to have a link can interfere with tapping into submenus on mobile.
-
Follow-ups: Another user on the Colorblock theme couldn’t find section-header.min.css and was asked to open a separate community thread; a link was provided, outcome pending.
-
Additional issue: A different user reported the mobile menu not loading, shared a site link and screenshot; no solution yet.
-
Central assets: Code snippets and images were key to understanding and confirming the fix.
Status: Original issue resolved for the initial site; subsequent similar cases remain open.