Shows mobile menu on laptops with touchscreens

Created on 19 March 2025, about 1 month ago

Problem/Motivation

If a machine has a touchscreen is-ultimobile is not removed from the class list in the html tag. Users with a touchscreen laptop are always served the mobile menu. Even if their laptop is plugged into an external monitor.

Steps to reproduce

Add an ultimenu navigation block and view on a laptop with a touchscreen. This was tested in our custom theme and in Olivero. Every browser on the laptop with the touchscreen showed the mobile menu.

🐛 Bug report
Status

Active

Version

3.0

Component

Code

Created by

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

  • Issue created by @melissag
  • 🇮🇩Indonesia gausarts

    Thank you.

    Yes, it is 3.x intentional feature to avoid CSS complexity with media queries device width detection.

    Since 3.0.6, you can just as easily override the ulimenu CSS files if fine-grained layouts are required, see CR:
    https://www.drupal.org/node/3447576#ultimenu-touch-replacement

    However I see a point if users want to make it optional, that is, to make a configurable breakpoint for different menu displays.

    Feel free to patch, or chime in for 2-3-hour works, as a new feature.

  • First commit to issue fork.
  • Pipeline finished with Success
    5 days ago
    Total: 145s
    #480548
  • 🇺🇸United States hablat

    We ran into this issue as well where we have laptops that have touch screens. The javascript seems to assume any touchscreen device is a mobile device. In our case it wasn't and the is-ultihover class was being removed on touch screen laptops. Created a patch to check, using media query, if the device has no hover capability before removing the class. This seems to solve it for us. Added is a MR to the ticket

  • 🇮🇩Indonesia gausarts

    Thank you.

    Your fix should be in another thread, because #2 is more than your enhancement. I don't mind it here, though. We'll change it back to a feature after commiting yours.

    ATM, there are two data.hover in it, please update them both. Not sure if moving it into var data will be equally working, other than more efficient. Feel free to decide.

  • 🇺🇸United States hablat

    @gausarts sorry for the mixup on the ticket and thanks for being flexible. I've added the change to the other data.hover you mentioned. I hope this is what you were looking for. Thanks.

  • Pipeline finished with Success
    4 days ago
    Total: 181s
    #481399
  • Pipeline finished with Success
    4 days ago
    Total: 262s
    #481410
  • 🇮🇩Indonesia gausarts

    There are options at /admin/block/ULTIMENUBLOCK like Always use hamburger or Use caret which appears to result in a conflict against your logic.

    Try having the same menu (clones) with different/ conflicting options as above, but placed at different pages to immediately see if any regression.

    If you or anyone can verify any combo of those options are good, that would be very helpful. Otherwise I may need some time to crosscheck them.

    Thank you again.

Production build 0.71.5 2024