solution for hover on touch screen

Avatar
InMotionFans
  • Answered
Do you have any suggestions for how to handle hover on touch screens. hilmarholyrosary.org is the one of the sites I'm having issues with.
Replies 1
Avatar
0
JacobIMH
Hello and thanks for the great question. Unfortunately there isn't a simple quick-fix for having a menu with links that relies on the hover functionality of the mouse to suddenly also work with touch screen devices. Some larger touch screen devices such as a tablet might have functionality built in where a single long tap is treated as a hover, but not all of them are going to do this, and most mobile phones will not either. This is when more complex methods of creating a responsive web design would be important. That way your site can detect what type of device it's being viewed on, and then adjust accordingly to make your site navigable on that device. The @media (hover) media query should let your site detect if the device viewing it is capable of hovering. Then you could swap out some CSS rules to make your menu clickable instead of hoverable, or you could just make it so your menu always works on clicks instead of hovers. Here is a pure CSS drop-down menu when clicked that I found that might lead you in the right direction. Please let us know if you had any further questions at all. - Jacob