关闭汉堡菜单时主图异常变宽位移问题求助

Hey there, let’s work through this bug you’re hitting with your parallax hero shifting when closing the burger menu. After looking at your code, the problem’s likely tied to how the burger menu’s components (overlay, wrapper) interact with your page’s layout—especially since you’re using a fixed background for the parallax section. Here’s how to fix it:

1. Stabilize the Burger Menu Overlay #

The default bm-overlay might be causing unexpected layout jumps when it’s removed on menu close. Update its CSS to lock it to the viewport so it doesn’t interfere with the page’s flow:

.bm-overlay {
  background: rgba(0, 0, 0, 0.3);
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}

2. Control Body Scroll During Menu State Changes #

Burger menus often mess with page scroll, which can trigger layout shifts. Add this global style, then make sure your menu component toggles the menu-open class on the <body> element when the menu opens/closes:

body.menu-open {
  overflow: hidden;
  position: fixed;
  width: 100%;
}

This stops the page from scrolling behind the menu and prevents weird jumps when restoring scroll after closing the menu.

3. Lock the Parallax Section to Viewport Size #

Your .parallax element uses flex: 1 1 100% which can react to body width changes. Update its CSS to explicitly use viewport units:

.parallax {
  display: flex;
  flex-direction: column;
  background-image: url("../img/ella-don-Hzh9sbcV0Dg-unsplash.jpg");
  height: 100vh;
  width: 100vw;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

Using 100vw and 100vh ensures the parallax section stays fixed to the viewport, so it won’t shift when the menu’s state changes.

4. Secure the Burger Menu Wrapper Position #

The bm-menu-wrap might have animations that affect layout. Add this to keep it locked in place without disrupting the rest of the page:

.bm-menu-wrap {
  position: fixed;
  height: 100%;
  z-index: 9999;
  left: 0;
}

Why This Works #

The core issue is that closing the menu triggers a page reflow when the overlay/wrapper elements are removed. By locking elements to the viewport, controlling scroll, and fixing positions, you eliminate the variables that cause the parallax section to shift unexpectedly.

内容的提问来源于stack exchange，提问作者Alexandro Pineda