Mobile on resize won't restore menus and flash of unstyled content

[dingo-d]

I have put the okayNav() inside a function, so that I can call it on resize like this

function navigation(){
    $('#nav-main').okayNav({
        swipe_enabled : false,
    });
}

navigation();

$(window).on('resize', function(){
    navigation();
});

The problem is that the resizing seems to only work when you go from fullscreen navigation (desktop) towards the mobile (smaller resolutions), but not the other way around.

The only way I made it work if I made my browser full screen. On mobile devices this is not the case. And this is an issue when I'm in portrait mode and go to landscape mode.

So far I've tested this on Android Galaxy S6, and on a windows tablet, but I recon the same will happen on ipads and iphones.

Also is there any way, on mobile devices, to prevent the flash of unstyled content? Because I can see all of my menu which collapses once the page loads. Or do I need to manually implement something like setTimeout()?

Thanks

[dingo-d]

Ok, so it seems that the resize issue is happening in Chrome only (a thing that one would never expect). The weird thing is that the codepen example works on Chrome fine.

I also have errors with revolution slider and common.js only on chrome.

[VPenkov]

In your case you can use $('#nav-main').okayNav('recalcNav'); on resize. Also, okayNav already tracks your window size and calls the recalcNav method on resize.

In order to be more helpful, I'd need an URL to see what's wrong. You can mail it to me on hi@vergilpenkov.com if privacy is an issue.

[dingo-d]

I'll try your solution and see if it works, and if it doesn't I'll mail you the url. Thanks!

[dingo-d]

Ok, so I've made a hack that seems to be fixing the Chrome issue:

    function navigation(){
        $('#nav-main').okayNav({
            swipe_enabled : false
        });
        $('#nav-main').okayNav('recalcNav');
    }

    navigation();

    $(window).on('resize', function(){
        $('#nav-main').okayNav('destroy');
        navigation();
    });

Which is a hack, but seems to be working. I'm destroying it and rebuilding on every resize. Not super happy about it, but it does the job.

[VPenkov]

Might be a bug. Will definitely look into it.

[dingo-d]

Ok, thanks! :)