CSS hovers are not working on touch devices

I have this website:
https://goo.gl/iwpDzp


On touch screen laptops, the navigation will not expand on hover.

This is normal behavior: https://www.useloom.com/share/d4e16705a32c4a28abd238219778ad2d

When you are on a touch screen laptop using the same operating systems and browsers as a regular laptop, the menu will not hover. This is driving me mad and I cannot figure out how to fix it. Any help is appreciated.
lvollmerAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

HainKurtSr. System AnalystCommented:
there is no such thing on tablets like hover :)
you should use click events...
1
lvollmerAuthor Commented:
Hi HainKurt - the issue is not occurring on tablet/mobile. It is occurring only on touch screen laptops when the user mouses over the navigation item.
0
HainKurtSr. System AnalystCommented:
do you have a link to the site...
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

lvollmerAuthor Commented:
0
HainKurtSr. System AnalystCommented:
put this on your page and test

console.log (('ontouchstart' in document))

Open in new window


what is your OS?
0
HainKurtSr. System AnalystCommented:
a simple demo

https://jsfiddle.net/723eaLch/

is this working fine in your test pcs/browsers?
0
HainKurtSr. System AnalystCommented:
your page have some JS errors, fix that one before going further

Uncaught ReferenceError: MktoForms2 is not defined
    at (index):364

<script>MktoForms2.loadForm("//app-sj07.marketo.com", "155-NBF-513", 1759);</script>

Open in new window

0
lvollmerAuthor Commented:
The OS is windows 10 and it is happening in all browsers, *only* on these touch screen laptops. it is so weird. Let me give that a shot and report back.
0
HainKurtSr. System AnalystCommented:
what tool/library are you using on this nav bar?
0
lvollmerAuthor Commented:
no dice on the console.log (('ontouchstart' in document)) test. going to look into the JS issue now
0
lvollmerAuthor Commented:
on which page did you find this error? I can't find it on the homepage or a few others that I checked

Uncaught ReferenceError: MktoForms2 is not defined
    at (index):364

<script>MktoForms2.loadForm("//app-sj07.marketo.com", "155-NBF-513", 1759);</script>
0
HainKurtSr. System AnalystCommented:
please ignore that error :)

Uncaught ReferenceError: MktoForms2 is not defined
    at (index):364

Open in new window


it is coming from my AD Blocker, which blocked some part of your page and your js failed because of that...
If I disable AD Blocker, no error on your page...
0
lvollmerAuthor Commented:
got it, ok thanks.
0
HainKurtSr. System AnalystCommented:
what happens if you disable touch pad on that pc?
or detach mouse? any difference in behavior?
0
HainKurtSr. System AnalystCommented:
in chrome, emulation window, you can add many devices and debug your page

check this screenshotScreenshot---21_08_2017---3_31_58-PM.pngthen here, play with settings, or add a custom device and see what property of the device is causing this issue...
0
lvollmerAuthor Commented:
what happens if you disable touch pad on that pc?
or detach mouse? any difference in behavior?

No difference

Would you mind expanding that screenshot a little bit so I can see where you grabbed the emulation window? I have been trying to find that tab for 2 hours and just can't find it
0
lvollmerAuthor Commented:
0
lvollmerAuthor Commented:
nevermind, I found it. still can't figure out how to fix it, though.
0
HainKurtSr. System AnalystCommented:
maybe it cannot be fixed
maybe it is a bug on browser
maybe it is how it is designed...

issue is os is reporting itself to browser and browser works according to that information...

if os says "I am tablet" browser removes all hover effects...
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
lvollmerAuthor Commented:
I am convinced this is a OS/hardware issue. thanks for a second set of eyes.
0
Brandon LyonSenior Frontend DeveloperCommented:
The reason that hovers work on mobile devices is because they're touch-first devices. Laptops and desktops are mouse-first devices. Whatever is the primary pointing device gets the hover.

HainKurt's first answer is the most technically correct. When designing an interface that needs to be usable on a touch device, you should be using clicks and toggles instead of hovers.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.