I'll give my example as it explains exactly what I mean. We have a store that on the main menu has a "Shop" link that when hovered over, will display a dropdown menu of categories and subcategories. Historically, the word "Shop" was linked back to the store homepage. But on mobile, if you click "Shop" to get the dropdown list, it just goes back to the homepage without the user being able to see the dropdown menu. I can fix this a number of ways, but I'd like to know what the best practice is. If I make it not a link, I think that's a UX issue in itself for both mobile and desktop versions.

  • Is there anything to prevent you from just using @media queries to apply the hover effect only on desktop? Mar 13 '13 at 23:47
  • If that happened there would be no dropdown list for mobile, effectively causing the same UX problem.
    – callmedpit
    Mar 14 '13 at 13:23
  • 1
    I'm not seeing the problem. If you want to have a menu that triggers upon hovering when on desktop, just have it trigger upon clicking when on mobile. This seems more like a basic implementation detail than a UX question. Or am I completely misinterpreting you? Mar 14 '13 at 13:30

You may not like the answer, but basically, you shouldn't use hover as an interaction anymore unless you know for certain that your customers will only be using it on a non touch based pc.

If they use it on any touch device (tablet, touch based pc, or mobile), then hover is meaningless. Although some touch based browsers will try to convert hover into a touch event, it is inconsistent, and not very usable.

So you will have to use a different menu type that works well with touch devices, or make it click / select based rather than hover based. I do not recommend the latter.


What about relying on the common mobile usability patterns, regardless of the historical UI? Such as:

  1. the name/logo placeholder as a link to the home page.
  2. a menu icon or word that shows/unfold/etc the menu on tap
  3. a dedicated breadcrumb and/or back button when necessary.

The decision here is whether you want to keep the desktop and mobile experience/interface consistent or not. Obviously it is impossible to create the same rich interactive experience on mobile because of the limited screen space and user interaction.

If you decide to keep the website the same (I guess for easy of maintenance and update), then you have to design for the lowest common denominator, which suggests that you have to provide a separate link for the home page and the Shop button could become an accordion header or trigger for the selection (not necessarily a dropdown list because it is hard to use on a mobile device). The good thing about this approach is that you retain all the functionality and consistency, but you can build richer interactions for the desktop just the same.

If you decide to keep them separate them separate (I guess for better experience for the device), then it won't really matter because you should just do what is easiest based on your content and navigation structure. The good thing about this approach is that users get the most effective use out of the mobile and desktop designs, but it is more effort to maintain two different designs/sites.

Of course, you should still test these ideas/approaches against the users, as every business/website/customer group is different.


If there are a heap of links in the sub nav, I'd make the menu item clickable so that the sub nav can be opened and closed. That way the user isn't scrolling down too far to get to the main page content. You then will have to disable to the default link action by using some javascript.

If there aren't so many links you could display them all by default (no hiding/showing the sub nav), and have them indented from their parent link. Then you can still have the shop button link to the home page.

If you have a lot of categories and sub categories, I would opt for keeping the menu clickable. Then you could link to the home page from the logo or add a 'home' link to the menu and just hide it when at desktop widths.


Lets try this

SHOP <- click/tap

and menu appears

  • Home
  • Bla
  • Bla bla
  • Bla Bla bLa

PLUS: adding home page link behind your Logo

It's a simplest way to resolve your issue I think


This is a suggestion to consider, NOT a definitive answer:

How about next to the "shop" button that currently has hover functionality, placing a tiny icon touchscreen device users (and others) could click to replicate that hover function?

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.