Navbar menu automatically closes + Using lottie in navmenu button

Hi guys!

Navbar menu (hamburger) automatically closes in about 14 seconds or so without pressing anything. It happens on tablet and mobile — I suppose it’s the truth for desktop too but I’m not using the menu on desktop. As you can see I’m just using Webflow’s default navbar button/menu, not a custom one.

Here is a read-only link: https://preview.webflow.com/preview/emd-labs?utm_medium=preview_link&utm_source=designer&utm_content=emd-labs&preview=4389dacad068c921d3f0c504b6c333ca&workflow=preview

Also, I want to use lottie in the navbar button but I do not know how to implement it in the menu. I was trying to use Webflow Interactions for that matter but, even auto-close bug aside, it didn’t work because it’s possible to close the menu by tapping outside of the menu (it’s not full screen) or tap on the navlink — I guess it’s possible to use some custom code for that.


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hey @GeorgyDesign

No idea for the autamatic closing of the menu, it doesn’t show in my preview…

For the animation, you can actually trigger one when the navbar opens.
Just select your .navbar and select the trigger : ‘Navbar opens’.

Then you can setup your animation for the burger icon.
On open : get your Lottie animation to 50% (with an initial state of 0%)
On close : get it to 100%

That should do the trick ! :slight_smile:

1 Like

Hey @jptrinh!

Thanks! I forgot about the “Navbar opens” option in the interactions.

As for the auto-close bug (or whatever it is): maybe it is in the live website only — https://emd-labs.webflow.io

Oh yeah I see it. My guess would be on the custom code then. I get an error with the niceSelect in the console. Maybe you can look into it ?

1 Like

It was like that before Nice Select. I’m gonna try to disable all of the custom code — maybe you are right.

Thanks!

1 Like

Yeah, you were right @jptrinh!

The bug (if we can call it a bug) was caused by the following code:


  <script>
      var Webflow = Webflow || [];
      Webflow.push(function () {
        // DOMready has fired
        // May now use jQuery and Webflow api

  // start everything
        var tabTimeout;
        clearTimeout(tabTimeout);
        tabLoop();

      // define loop - cycle through all tabs
      function tabLoop() {
          tabTimeout = setTimeout(function() {
              var $next = $('.fs-tabs-menu').children('.w--current:first').next();

              if($next.length) {
                  $next.click();  // click resets timeout, so no need for interval
              } else {
                  $('.fs-tabs-link:first').click();
              }
          }, 5000);  // 5 second tab loop
      }

      // reset timeout if a tab is clicked
      $('.fs-tabs-link').click(function() {
          clearTimeout(tabTimeout);
          tabLoop();
          });
      });
  </script>

The reason is that the custom code is using “click” as a way to switch tabs, hence the menu auto-closes: it’s just the browser clicks on a tab.

Now I wonder how to fix it…

Awesome you found the source !
Can you tell me what the script does ? And where do you use it ?
Maybe we can make the script more specific, or behave differently

I took the script from this post: AutoPlay Tabs - Any ideas? - #42 by Charlie_Bradford — it enables auto tabs switching. Actually, the very same topic probably has an answer to the issue: I found at least one dude with the same problem and he actually wrote a code that can potentially help me too!