Streaming live at 10am (PST)

Help needed remaking the Homedepot mobile navbar

Hi all!

I am attempting to recreate the mobile nav experience at homedepot.com while using only Webflow components. This style nav slider seems to alleviate some compromises from my current design, notably wanting a sticky nav on mobile plus a scrollable dropdown box (not possible as far as I know).

Anyways, this looks like it might work with the slide menu nested in a nav container, but wanted to see if anyone had some ideas to do this efficiently (and fast!!)

Thanks! :slight_smile:

Hi @NewInBoston, here is an article how to make a mobile menu scrollable: [TUTORIAL] Make mobile menu SCROLLABLE

To have the navbar mobile menu button fixed, drop your navbar into another section created as the nav section directly under the body, then give that section a class and make it fixed with a z-index higher than other elements on the page, like 2000 is a good value for z-index.

I hope this helps

Hi Dave, it definitely does help. Because I’m building a site heavy in Collection Pages, I might just scrap the whole dropdown and just have one link to a collections page. Then I’m not fighting the 20 collection limit with every nav bar, and also won’t have to update the links by hand.

Rather than even have a long dropdown. if it’s going to be a dropdown to reveal, might as well just make it a link to a new page that shows all categories, freely scrollable for any length.