Menu not resizing properly on Chrome or Firefox

[bbsemail]

It looked like this menu had great potential. However, I've uncovered a huge issue that prevents its use until I can solve it. In my test page, or the menu's demo page, if you restore down on a Windows PC in either Firefox or Chrome the menus stay "dropped" / expanded down and the slide down feature performs erratically. Any idea why?

[Aybee]

Yes, the download version 1.3.3 will not work. Error comes from this line

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Place a jquery.min.js inside folder /js/ and change line to

<script src="js/jquery.min.js"></script>

[bbsemail]

Thank you for the reply. I switched to a local copy of jQuery and get the same results on window resize: http://dev.hcca.org/flexnav/index0.html Am I doing something wrong? Thanks for the help. (i didn't get an email that my comment had a reply so hadn't revisited until now) I hope to use your great looking menu

[bbsemail]

Follow up ... I'm guessing you directed me to use a local copy of jquery because all the menus were dropped down/expanded. The menus work and drop/slide up and down until you resize the window at which point everything gets confused. I'm not seeing any errors or warnings in Firefox's Console that would explain this.

[Aybee]

I hope to use your great looking menu

It's not by me.

Don't know how to fix this.

Maybe you will give this one a chance https://github.com/samikeijonen/responsive-nav.js It's a fork of https://github.com/viljamis/responsive-nav.js/issues/178

[mdziadek]

hi had the same problem, solution that works for me below, note that I put another class to li element which have ul inside, This is only for convenience in creating my template

    $(window).resize(function() {
        $('.sub-menu').hide();
    });

[austin350s10]

I was having the same problem as well. Didn't matter what browser I was using. After resizing a few times and then hovering over a menu item the submenu would not close after moving the curser to another menu item. This results in many submenus being open at the same time. I found that the problem was in the resizer function itself. Specifically the following line:

$('.item-with-ul').find('ul').removeClass('flexnav-show');

needs to be changed to:

$('.item-with-ul').find('ul').removeClass('flexnav-show').hide();

Here is the whole resizer function with the correction:

`resizer = function() {
  var selector;
  if ($(window).width() <= 780) {
    $nav.removeClass("lg-screen").addClass("sm-screen");
    if (settings.calcItemWidths === true) {
      $top_nav_items.css('width', '100%');
    }
    selector = settings['buttonSelector'] + ', ' + settings['buttonSelector'] + ' .touch-button';
    $(selector).removeClass('active');
    return $('.one-page li a').on('click', function() {
      return $nav.removeClass('flexnav-show');
    });
  } else if ($(window).width() > 780) {
    $nav.removeClass("sm-screen").addClass("lg-screen");
    if (settings.calcItemWidths === true) {
      $top_nav_items.css('width', nav_percent);
    }
    $nav.removeClass('flexnav-show').find('.item-with-ul').on();
    $('.item-with-ul').find('ul').removeClass('flexnav-show').hide();
    resetMenu();
    if (settings.hoverIntent === true) {
      return $('.item-with-ul').hoverIntent({
        over: showMenu,
        out: resetMenu,
        timeout: settings.hoverIntentTimeout
      });
    } else if (settings.hoverIntent === false) {
      return $('.item-with-ul').on('mouseenter', showMenu).on('mouseleave', resetMenu);
    }
  }
};`