[Resolved] How to create a mobile nav like this?

[Arp]

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.

[Arp]

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:

@media (max-width: 768px) {
    .secondary-navigation {
        display: none;
    }
}

That’s it! Now I just need to add a logo to the nav & my site will take another step towards viability.

[Arp]

Addendum: the secondary nav can’t be above the header, that tripped me up too.

[Arp]

Addendum 2: I used Font Awesome to add an icon navigation item to the primary menu (for My Account) to go with the search & cart options.

[Leo]

Glad you’ve figured out!

[Tom]

Thanks for posting your process in here – really appreciate it 🙂

[Arp]

Just wanted pay back some of the help I’ve received 🙂

This was cool to figure out. I asked friends for links to the ecommerce sites they like and am just following what works for successful companies.

[Author]

Posts