CODEWITHSUNDEEP
javascriptjqueryhtmldrop-down-menuresponsive-design
Yamiko
Yamiko

Reputation: 5453

navbar collapses on mobile with chrome/safari on scroll

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.

Upvotes: 2

Views: 3219

Answers (4)

chili434
chili434

Reputation: 644

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!

Upvotes: 6

L105
L105

Reputation: 5419

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);
        }
});

Upvotes: 0

Alistair Nelson
Alistair Nelson

Reputation: 3293

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

Upvotes: 2

Patrick Aleman
Patrick Aleman

Reputation: 619

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

Upvotes: 0

Related Questions