Search code examples
wordpressmaterialize

MaterializeCSS Dropdown Link not clickable


I'm experiencing a frustrating problem with MaterializeCSS dropdown links created on Wordpress Menus. I can see the link when I hover over the top level items, e.g. About FAIRDOM, but I can't click any of them. I know it's an issue somewhere perhaps in having a hidden element above that may be catching the click event, but I can't see where. Anyone with any idea of where the issue is in this site http://beta.fair-dom.org/ ?


Solution

  • MaterializeCSS built their dropdowns "mobile-first". Essentially, what that means for you is that the JS that powers the dropdowns explicitly disables the href on click for all dropdowns. This is a because, on mobile, a user cannot hover and can only touch.

    However, if you're still wanting to get around this, you can try out the following (assuming you're using jQuery):

    <script>
    $('.dropdown-button').click(function() {
        window.location.href = $(this).attr('href');
    }
    </script>
    

    Try sticking that just before you close the body tag,