When you have a large menu with multiple items, and use a small screen, so the off-canvas is expanded, you can not scroll down to menu items out of view.

I noticed a css declaration in this file:
../ultimenu/css/components/ultimenu.offcanvas.css
Line 46:
.is-ultimenu-canvas.is-ultimenu-expanded,
.is-ultimenu-canvas.is-ultimenu-canvas--hiding {
overflow: hidden;
transform: translate3d(0px, 0px, 0px);
}

When I remove the 'overflow: hidden' declaration it's solved.

Issue fork ultimenu-3224639

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

ecvandenberg created an issue. See original summary.

gausarts’s picture

gausarts commented

Thank you.
Is it still an issue with the latest @dev?

ecvandenberg’s picture

ecvandenberg commented

Yes it is. The css declaration in ../ultimenu/css/components/ultimenu.offcanvas.css Line: 46 is still there.
The used CSS selector .is-ultimenu-canvas.is-ultimenu-expanded concerns the HTML body element. It sets the overflow property to hidden resulting in any element outside the visible screen is hidden. The page becomes unscrollable.

My workaround was to overwrite the declaration with overflow: visible. But then when the off-canvas is active it gets the height of the full page. And that is not nice either.

A better solution is to set the body height to 100% and indeed also overflow hidden. This way the page height gets the height of the off-canvas menu.

So the declaration at ../ultimenu/css/components/ultimenu.offcanvas.css Line 46 should become:

.is-ultimenu-canvas.is-ultimenu-expanded,
.is-ultimenu-canvas.is-ultimenu-canvas--hiding {
overflow: hidden;
height: 100%;
transform: translate3d(0px, 0px, 0px);
}

By the way...the dev version breaks up my custom CSS adaptions. Important to make a note about that when you do a next release.

gausarts’s picture

gausarts commented
Status: Active » Postponed (maintainer needs more info)

Thanks for details.

Just to be sure, is the @dev also happening with core Bartik? Please change your default theme for a mo.

Please also limit scopes on this specific issue.

Sorry I got limited resources, and need more info to be on the same page, and figure out better solutions.

ecvandenberg’s picture

ecvandenberg commented

OK...just to be absolutely sure...

I installed a fresh Drupal 9.2.2 site and did:
composer require 'drupal/ultimenu:2.x-dev@dev'

Then configured Ultimenu in very basic settings and added some blocks in it's region.
And the issue is still there. Which makes sense because the Bartik theme also does not set body height to 100%.

If the theme itself does not set the body (and HTML) to height: 100% then this issue occurs.
This is usually not needed if you do not set body overflow to hidden.

Since you declare this body overflow to hidden in this module, I think you have to also add the height: 100% declaration.
The two more or less belong together.

gausarts’s picture

gausarts commented

Got it. I appreciate your detailed explanations.

Patches are welcome till I'll get back to it. Thanks.

  • gausarts committed 8ea07dc on 8.x-2.x 
    Issue #3224639 by ecvandenberg: Expanded mobile menu does not scroll due...
gausarts’s picture

gausarts commented
Status: Postponed (maintainer needs more info) » Fixed

Added your fix.

Also added the fix for the potential long page that is when clicking hamburger far down the page the menu may not be reachable.
Basically forcing to scroll to the top of the page so that the menu are visible.

I was tempted to use height: 100vh, but got time to fix potential ramification for now.

Committed. Thank you for contribution and patience.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.

kolotunbobo made their first commit to this issue’s fork.