WooCommerce Storefront dropdown menu touch screen

  • 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?

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

Viewing 4 replies - 1 through 4 (of 4 total)

  • Hi!

    Actually the function you described here:

    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.

    can be done by activating the Handheld menu in the customizer (see screenshot: https://cld.wthms.co/rWNF0a). That would create a dropdown menu in smart devices and people will be able to see the Child items under the Parent link if they tap on the arrow.

    – Screenshot: https://cld.wthms.co/2VWqfl

    If you think Storefront should have additional features, please share your idea in our ideas board at:

    – https://ideas.woocommerce.com/forums/275029-storefront?_ga=2.219370141.585793198.1534749181-1501758455.1517919856

    If it gets enough votes, it could be included in the roadmap for future enhacements.

    Cheers!

    Thread Starter amelnyk

    (@amelnyk)

    Thanks for your reply.

    I understand the functionality exists for the mobile “handheld” menu. But, I want the functionality to exist for the desktop (large screen) version of the site (i.e on my touch screen laptop). I want the existing large screen navigation bar layout (not the mobile “menu” button). So far, I don’t see a way to apply the functionality of the handheld menu to the large screen layout. Maybe I am missing something in the customizer?

    Given that the storefront demo site does not work with my touch screen laptop, I am curious to know if this can be addressed with the current theme. If it can be addressed, why doesn’t the demo site already incorporate this functionality?

    Plugin Support John Coy a11n

    (@johndcoy)

    Automattic Happiness Engineer

    Hi @amelnyk,

    Please post this issue on the appropriate Storefront support forums:

    https://www.ads-software.com/support/theme/storefront

    Thread Starter amelnyk

    (@amelnyk)

    Thanks, will do.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘WooCommerce Storefront dropdown menu touch screen’ is closed to new replies.