Menu closes on scroll on mobile devices

[VeggieVeggieFruitFruit]

I really love everything about this navigation... it works beautifully except on my android phone! I'm intending the site to be mobile first so this is a really big issue.

When the address bar is visible and the menu is opened and scrolled through, it closes. HOWEVER, if the address bar is hidden, and the menu is opened and scrolled through, it remains open. It works fine when i resize the window on my tablet or in my browser.

Is it something with the toggle?

I've found some mentions of this elsewhere for other responsive menus that are out there. I wish I could figure out a fix on my own, but I'm desperate now. I really don't want to have to scrap this and find something else.

Thanks!

[VeggieVeggieFruitFruit]

Update... I think I found the answer as to why this happens. As for implementing a fix, I'm not sure I have the knowledge to do so.

The address bar dropping down is a resize event. If there's a way to make it so it's responsive ONLY to WIDTH changes, and ignore any height changes, this might be able to be fixed.

[nerobrn]

Hi, same problem with chrome 41.0.2272.96 on android.

I have a big dropdown menu and sometimes the menu closes if i scoll up/down fast.

It looks fine with Android (AOSP) Browser tho.

[arielsalminen]

Thanks for reporting, I’ll see soon if I can reproduce this on my Android.

[arielsalminen]

@VeggieVeggieFruitFruit @nerobrn Can’t reproduce this issue on any of the Android phones I have here. Can you give more details or html/css/js you’re using?

[foxhound4206]

I had this same issue. I would suggest looking in your header or Jquery/Script area for a $(window).resize(checkWidth); and either comment it out or devise a workaround.

I commented this out, retested on my site and the problem was solved!

[josefzacek]

I ended up removing !important from responsive-nav.js aroud line 638 and adding !important to .nav-collapse.opened in my css file.

.nav-collapse.opened { max-height: 9999px !important; }