dropdown menu touch screen large screen woocommerce storefront

  • Resolved amelnyk

    (@amelnyk)


    6 years, 3 months ago

    The woocommerce storefront theme seems to have unexpected behaviour for touch screens. I am using a laptop with mouse and touch screen. I have a site (under construction and not live) that shows the same behaviour as the woocommerce storefront demo page (that I’ve linked to).

    When a link with a dropdown menu (ex. Shop) is hovered (with mouse), the dropdown menu appears and any of the links can be clicked. When the dropdown menu (Shop) is touched, the page navigates to the Shop page and the dropdown menu appears and then disappears. To actually click on any of the dropdown links, the touch must be held on the Shop link and then the user must look for the desired dropdown link and then quickly touch it before the page navigates away and the dropdown menu disappears. This requires the user to learn this skill and does not seem natural or desired.

    I understand this is a known issue with hover and touch screens. My question is if the Shop (parent link) can be separated from the arrow “v” as two separate links. Parent link will have hover and click ability to navigate to Parent page and show dropdown menu on hover. Arrow “v” will have hover ability to show dropdown menu and click ability to show dropdown menu; importantly, the arrow will not navigate to the Parent page. This still requires the user to learn to use the arrow with touch screens, but I think this is an easier learning curve than “timing of touch”.

    Is there a plugin that solves this issue? Or does anyone know if there are plans for this issue to be addressed in future woocommerce or storefront versions? It seems like basic functionality for a theme to be compatible with touch screens. Any suggestions for me on how to address this myself?

    Just to be clear, this is NOT an issue with touch and mobile devices. I am specifically trying to address the issue with touch screen on large (desktop/laptop) devices with the full screen theme layout.

    • This topic was modified 6 years, 3 months ago by amelnyk.

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)
  • Job a11n

    (@jobthomas)

    Automattic Happiness Engineer

    Hi @amelnyk. Let me first try to recap what you’re asking to make sure I understand correctly.

    When using an iPad Pro (or any large tablet device), the menu displayed, is the main navigation one. However, on our demo site, in order to see the dropdown for “shop”, you’d have to click on it since these devices don’t allow you to hover. The problem is that if you click on it, it opens the shop page.

    There’s a fairly simple way to fix this. It’s by adding a custom link to the menu and just entering a # as the URL. This will allow customers to click on it without being redirected.

    I hope that helps!

    Thread Starter amelnyk

    (@amelnyk)

    Yes, that is a possible solution. I don’t like that I would then need to add the “shop” navigation in the dropdown, so that even when you are using a mouse, you could not click on the Shop menu button as navigation. Basically, you lose the point of the hover effect for mouse-users to gain functionality for touch screen users. I guess there’s pros and cons to any solution. But, I would prefer a solution that maintained the clickable “Shop” menu item as navigation, but also included a touch-friendly button as the drop down arrow (instead of having the arrow included with the Shop as text).

    I am using a Dell laptop with touch screen and Windows 10.

    Job a11n

    (@jobthomas)

    Automattic Happiness Engineer

    Hey @amelnyk. I agree with you that it’s no ideal. I’ve left a comment on a code repo that suggests these changes to the developers of Storefront here: https://github.com/woocommerce/storefront/issues/962 – your best bet will be to follow that thread.

    Thread Starter amelnyk

    (@amelnyk)

    Thanks for the link. I’ll mark this as resolved and follow that thread.

    Job a11n

    (@jobthomas)

    Automattic Happiness Engineer

    Hey @amelnyk – I just wanted to give you an update and indicate that our devs have merged a fix. That means that it’ll work better in the next version of Storefront.

    https://github.com/woocommerce/storefront/pull/965

    • This reply was modified 6 years, 2 months ago by Job a11n.
    Thread Starter amelnyk

    (@amelnyk)

    This is great news! I look forward to testing it out ?? Thanks for the update.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘dropdown menu touch screen large screen woocommerce storefront’ is closed to new replies.