I am working on a responsive site with my own css not bootstrap.

On safari on the iphone and chrome on andriod the navigation is buggy.

If you open a category in the menu and try to scroll the menu will close.

I am working on a responsive site with my own css not bootstrap.

On safari on the iphone and chrome on andriod the navigation is buggy.

If you open a category in the menu and try to scroll the menu will close.

• javascript
• jquery
• html
• drop-down-menu
• responsive-design

• Works fine for me on Chrome and Safari for iphone – omma2289 Commented Aug 2, 2013 at 22:53
• Its not on chrome for my android or on safari on my co workers iPhone. we cleared cache and the problem persist. – Yamiko Commented Aug 4, 2013 at 19:20
• Works for me on iOS Safari (6.1.3). If its not a cache issue, perhaps it is related to particular versions of webkit? FYI: To avoid having to deal with caching false positives during web development, I would remend turning on "Private Browsing" when using Safari and to use incognito mode when using Chrome. – BigMacAttack Commented Aug 9, 2013 at 15:46

4 Answers 4

I noticed while debugging that your $(window).resize function is getting called while the user scrolls. You can simply ignore the resize event if the width has not changed and it will fix your issue.

$(window).resize(function(){

    if ( width == GetWidth() ) {
        return;
    }

    width = GetWidth();

    if(width >= 768){
        $("#logo").removeClass("front");
        $("#icon-bar .front").removeClass("front");
        $("#main-navi").show();
        $("#main-navi>li ul").hide();
        $("#main-navi .dropped").removeClass('dropped');
    } else {
        $("#main-navi").hide();
    }
});

Let me know if you run into anymore trouble!

If you have access to a mac then you could do remote debugging to see what is happening to the css on the page as you transition through the menu options.

See How to set up remote dubugging or safari on iOS6

Fairly simple problem. A mobile device does not have a constant mouse. Which means hovering wont work!. Make a simple work around like:

Click once to open menu -> Click agian to click on menu item -> and close menu

When open and user doesnt want to click on any menu item -> Click next to the menu -> close the menu

Fairly simple really, goodluck

If you disable the click event on touchmove does it works?

function clickEvent() {
    if($("#logo").hasClass('front')){
        $("#main-navi").stop(true, true).slideToggle(250, function(){
            $("#logo").toggleClass("front");
            $("#dropdown").toggleClass("front");
        });
    } else {
        $("#main-navi").stop(true, true).slideToggle(250);
        $("#logo").toggleClass("front");
        $("#dropdown").toggleClass("front");
    }
}


$("#dropdown").on({
        click: clickEvent,

        touchmove: function() {
            $(this).off('click', clickEvent);
        },

        touchend: function() {
            $(this).on('click', clickEvent);
        }
});