The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Hover problem on mobile devices

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #179156

    Go to – –

    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.


    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){
            // ... rest of code

    Hope that helps.


Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.