We have an issue that is on another thread, but that thread is not totally related to this problem.
On a dropdown menu, on certain devices their 'standards' are not to identify dropdowns, and if they have a HREF tag assigned, the dropdowns work, but goes straight away to the page of the link.
Apple devices do not to it. And on Desktop, they operate via hover. It seems to mostly do this on Android. We are told their standards don't take note of the hover part.
So a plan B would be of the @media width was 768 or below, showing a mobile menu, to disable the HREF on the first tap/click, but enable it on the second.
Is this possible to do??
The only issue might be, where some of the links in the menu are not dropdowns.
<div class='navigation' id='menu'>
<div class='navitem'><a href='/'><i class='fa fa-home'></i></a></div>
<div class='navitem'>
<a href='/contact-us'>Support <i class='fa fa-angle-down' aria-hidden='true'></i></a>
<div class='navitem-dropdown'>
<a href='/faq'>FAQs</a>
<a href='/the-experience'>The Experience</a>
<a href='/videos'>Support Videos</a>
<a href='/contact-us'>Contact</a>
</div></div>
<div class='navitem'><a href='/about'>About Us</a></div>
<div class='navitem'><a href='/blog'>Blog</a></div>
<div style='clear: both' ></div>
</div>
<div style='clear: both'></div>
</div>
Here is an example.
So how can I disable the HREF on click on the Support dropdown, and have it fire on the second - but NOT do that on the others?