Problem/Motivation

Hamburger menu doesn't seem to work since update to 11.0.9
Menu works in normal layout

Steps to reproduce

Open website on mobile browser click on the hamburger menu

aria-expanded goed to true, and the area label changes to close menu but nothing happens.

Proposed resolution

fix the hamburger menu

Affected website

https://www.hsv-tpluimke.nl

Remaining tasks

User interface changes

API changes

Data model changes

Dev Tools comments

Layout Collapse: The .primary-menu-wrapper has a computed width and height of 0px. This is because its only child, .menu-wrap, is set to position: fixed. Elements with fixed or absolute positioning are removed from the normal document flow, meaning they do not contribute to the dimensions of their parent container.

Off-screen Translation: The child .menu-wrap is physically located at left: 0px, but it has a CSS transform applied: transform: matrix(1, 0, 0, 1, -320, 0). This translates (moves) the element 320px to the left, which, given its width of 320px, pushes it completely outside the visible viewport.

Responsive Design Logic: This is a common pattern for "drawer" or "off-canvas" mobile menus. The menu exists in the DOM but is "tucked away" to the side. It is likely toggled (moved back into view) by clicking the sibling button.mobile-menu.

This code seems to throw an error:

const button = document.querySelector('button.mobile-menu');
const target = document.querySelector('.primary-menu-wrapper');

const data = {
buttonStyles: window.getComputedStyle(button),
targetStyles: window.getComputedStyle(target),
mediaQueries: []
};

// Check for display: none or visibility: hidden on the target at current width
data.targetComputedDisplay = data.targetStyles.display;
data.targetComputedVisibility = data.targetStyles.visibility;
data.targetComputedWidth = data.targetStyles.width;

// Also check the spans inside the button
const spans = button.querySelectorAll('span');
data.spansCount = spans.length;

error:
Error: Output exceeded the maximum allowed length.

Comments

lentini created an issue. See original summary.

lentini’s picture

Issue summary: View changes
lentini’s picture

Issue summary: View changes
lentini’s picture

Issue summary: View changes