Menu icon Foundation
Other Navbar for touch devices ?

Hi !

I have created a custom Navbar that uses the hover effect. Clearly it will not work on touch devices...
I could just hide it for touch devices (and displaying another navbar) using

<div class="show-for-touch">
</div
<div class="hide-for-touch">
</div
            

         

But how reliable is that method ?
What about hybrid devices ?

Or is there another way ?

Foundationnavbarscreentouch

Hi !

I have created a custom Navbar that uses the hover effect. Clearly it will not work on touch devices...
I could just hide it for touch devices (and displaying another navbar) using

<div class="show-for-touch">
</div
<div class="hide-for-touch">
</div
            

         

But how reliable is that method ?
What about hybrid devices ?

Or is there another way ?

Karl Ward over 5 years ago

As far as I can see, the icon moves left and makes room for text "Fahrdienste" on mouse hover? To me it looks like you have two options:

1) Just leave as is, and the hover effect will not work on touch. Touch users will just see the icon but can still click it naturally.

2) On touch, display the hover state by default, eg text is visible without hovering.

Florian over 5 years ago

Thanks !
That is my custom Navbar (you see the hover effect in action):
http://abload.de/image.php?img=bild003ateob.png

Karl Ward over 5 years ago

I got two comments:

  1. In terms of reliability, some vague hybrid devices may return 'touch' but then it will just display the interface as if it was touch anyway, and that can't be entirely wrong. Other than that, the hide methods should work fine.

  2. I would however question your custom navbar. When you say it "uses the hover effect", do you mean it has drop-down menus that display on hover? Most drop-down menus these days, including the one in Foundation, default to click/tap event on touch devices instead of hover. Some also have optional layouts for small touch screens (including the Foundation topbar).

Perhaps not optimal, but should be sufficiently reliable.