I like using primary & secondary navs for a shop but I’m not a fan of having 2 hamburger menus. I’ve noticed on a few successful ecommerce sites that on mobile, they tend to use 2 menus and that on mobile, one menu stays the same (usually because it’s icons) while the other becomes a hamburger. See this example: https://tomboyx.com/
I’d like to replicate that but I’m not sure if it’s possible. I know that with GP Pro I can put search & cart into the primary menu so those are visible whether on desktop or mobile, but it looks like if put the secondary menu below the header that the hamburger menu will stay below the header?
I understand if that’s how GP is coded but it would be cool if there was a snippet to make this happen.
I figured it out! In case someone else wants to know:
1) Do NOT use navigation as header (that was the roadblock for me)
Edit: it works with navigation as header (man I’m confusing myself…)
2) Create a menu with no menu items and assign it to Primary
3) Create a secondary menu, add links, assign it to Secondary AND Off Canvas
4) Set Off Canvas Panel to Mobile only
5) Hide the secondary menu on mobile with this bit of css: