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

Home Forums Support How to create a mobile nav like this?

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #1295616
    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.

    #1295661
    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.

    #1295675
    Arp

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

    #1295678
    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.

    #1295710
    Leo
    Staff
    Customer Support

    Glad you’ve figured out!

    #1295987
    Tom
    Lead Developer
    Lead Developer

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

    #1297000
    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.

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.