Streaming live at 10am (PST)

How to Move/Hide Nav bar and Close Nav Menu Using Built-In Interactions


#1

Howdy y’all,
I really love sites that are easy to navigate and animated drop-down/in/out/up menus are all the rave these days. I am new to Webflow but really loving it! There are some limitations with the free version, obviously, but I found a workaround for “closing” and “opening” the mobile (drawer/hamburger) Nav Menu class after clicking and scrolling. Click the read-only link below to see it in action.

Show / Hide on Scroll Animation Steps - works at all breakpoints

  1. Follow all the original instructions from the Webflow Tutorial, " Show and hide navigation bar on scroll."
    – Make sure Nav [class] is set to Fixed Position [top, bottom, left, right]
  • SUGGESTED: Set move to 100vh and back to 0vh for all move values, respectively.
  1. In the Timed Actions of the Enter animation configuration:
    – Select: Nav [symbol or class]
    – Add: Hide/Show; Display: Block
    – Add: Move; 0 [direction return to origin] DONE EARLIER
    – (Optional) Add: BG Color [have fun]
    – Select: Nav Menu [class] IMPORTANT (use Navigator {f})
    – Add: Move; 0 [direction return to origin]
  2. In the Timed Actions of the Exit/Leave animation configuration:
    – Add: Move; -100vh [direction return to origin, minus] DONE EARLIER
    – Select: Nav Menu [class] IMPORTANT (use Navigator {f})
    – Add: Move; -100vh [direction move, minus]

Show / Hide on Click Animation Steps - works at all breakpoints

  1. Using Navigator {f}, bottom screen nav, or by selecting:
    – Active Element or Class: Nav Menu
    – Add {+} Element Trigger: Mouse Click (Tap)
  2. In the “On 1st Click” section of the configuration:
    – Create new Timed Animation, NavMenu Leave
    – Add: Move -100vh [direction move, minus]
    – Select: Nav [class] IMPORTANT
    – Add: Move -100vh [direction move, minus]

That’s all folks!!

It took some trial and error, but sometimes the simplest solution is the easiest…but hardest to discover.

THE CATCH
Ok, so you probably noticed the original problem still kind of there, but mitigated. Yes, the hamburger click is required to close the mobile drop down and it stays open. BUT now upon click and/or scroll of any Nav Menu item, the Nav bar moves off the screen by 100 percent of the view height and vice-versa. Honestly, I actually like the functionality of this just fine. It is a bit sneaky but it keeps the menu open when scrolling back up, which encourages interaction with the mobile menu…sneaky, sneaky.

Hope this helps the community. Enjoy!

Peace ॐ,
RossC

– Read-Only Link to RossCYoga.webflow.io

Here is my public share link: RossCYoga.webflow.io
(how to access public share link)


Menu doesn't close after clicking link
Mobile version nav menu not closing