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
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
Comment #2
lentini commentedComment #3
lentini commentedComment #4
lentini commented