Hover problem on mobile devices

[Dedo]

Go to – kopi.php5.sk –

So I have this problem, on PC it works fine, that if you hover over the navigation elements, another line shows up, but on mobile device (iPhone, android etc.) there is a problem. If you tap on navigation element, it sends you right to the page, instead of making the hover effect as seen on PC.

How do I make it so that on first click it just scrolls the navigation, and on second click it actually sends you to page. I don’t know if this is solvable through JS or CSS, so please tell me.

Thanks in advance.

[Alen]

First there is no hover on mobile.

Without looking at your code it’s hard to suggest solution. But you might want to try using window.matchMedia to test for specific width then use preventDefault() on the link, then take care of it using JavaScript.

if ( window.matchMedia("(min-width: 320px)" ).matches) {
    var $myLink = $('.my-link-class');
    $myLink.on('click', function(e){
        e.preventDefault();
        // ... rest of code
    });
}

Hope that helps.

-Alen

[Author]

Posts