Offscreen menu horizontal scroll usually happens when a hidden mobile menu is pushed outside the viewport with negative offsets, left:100%, right:-280px, translateX(), or an oversized backdrop.
Mobile Menu Overflow Fix
Why does an offscreen menu create horizontal scroll?
An offscreen menu can create horizontal scroll even when it is closed. The menu may look hidden because it sits outside the visible screen, but its box can still contribute to the scrollable width of the page. This is common in mobile navigation, slide-out panels, account drawers, filter sidebars, and cart menus.
The bug usually appears after a developer tries to hide a menu by moving it away from the viewport. A rule like right:-280px or transform:translateX(100%) feels logical because the panel disappears visually. But if the element is still attached to the page in a way that expands the scrollable area, the user gets a sideways page instead of a clean closed menu.
- Offscreen menu
- Mobile navigation
- Horizontal scroll
- CSS transform
Test the hidden state, not only the open state
Many offscreen menu bugs happen while the menu is closed. Paste the closed menu CSS into a controlled preview and disable the offscreen offset, transform, or fixed width. If the horizontal scrollbar disappears, the hidden menu is not really hidden from the scrollable layout.
Related: Try this in the FrontFixer Live Inspector.
Open Live Inspector→What the bug looks like
The page slides sideways on mobile, often even before the menu is opened.
Why it happens
The menu is hidden by moving it offscreen instead of keeping it inside a safe fixed layer.
What usually fixes it
Use a fixed drawer, safe width, transform-based state, and clip the drawer system intentionally.
Why hiding a menu offscreen is not always safe
A mobile drawer is usually meant to feel like it lives outside the screen until the user taps the menu button. That design pattern is normal. The mistake is treating “outside the visible screen” as the same thing as “not affecting layout.” CSS does not always work that way. A positioned element can be visually outside the viewport and still become part of the scrollable overflow area.
The safest mental model is this: the menu should be a fixed overlay system, not a normal page section that has been shoved to the side. If the drawer belongs to the overlay layer, it should be positioned with position:fixed, bounded by the viewport, and moved with a controlled transform. If the drawer is treated like a normal block inside the document, it is much easier for its width and offset to widen the page.
Do not judge the menu only by whether it is visible. Judge it by whether the page remains the same width when the menu is closed, opening, and open. A clean offscreen menu should not create a horizontal scrollbar in any of those states.
min() or max-width so the panel never beats the phone.The drawer is hidden with a negative right value
This is the classic mobile drawer bug. The menu is positioned on the right side and hidden with a negative value. Visually, the drawer disappears, but the page may still become wider than the screen because the drawer is sitting outside the safe viewport.
Broken code
Negative right.mobile-drawer {
position: absolute;
top: 0;
right: -280px;
width: 280px;
}Broken visual result
The content fits, but the hidden drawer is still outside.
Correct code
Fixed drawer.mobile-drawer {
position: fixed;
inset: 0 0 0 auto;
width: min(280px, 86vw);
transform: translateX(100%);
}
.mobile-drawer.is-open {
transform: translateX(0);
}Fixed visual result
The drawer is controlled by the viewport, not document width.
The menu is placed at left:100%
Another common pattern hides the menu by placing its left edge at the end of the parent. That can be fine inside a clipped overlay, but if the element is attached to the document, it may create a full extra panel width beyond the viewport.
Broken code
Left 100%.drawer {
position: absolute;
left: 100%;
top: 0;
width: 260px;
}Broken visual result
The hidden drawer begins after the viewport edge.
Correct code
Translate inside fixed layer.drawer {
position: fixed;
right: 0;
top: 0;
bottom: 0;
width: min(260px, 86vw);
transform: translateX(100%);
}
.drawer.is-open {
transform: translateX(0);
}Fixed visual result
The drawer belongs to an overlay layer and does not widen the page.
The backdrop or menu strip is wider than the viewport
Sometimes the drawer is not the only problem. A backdrop, menu strip, or inner navigation row may use 100vw plus padding, a negative right value, or a fixed desktop width. The menu system then creates overflow even if the panel itself seems reasonable.
Broken code
Oversized menu layer.menu-backdrop {
position: fixed;
inset: 0;
width: calc(100vw + 70px);
}
.menu-strip {
position: absolute;
left: 18px;
right: -80px;
}Broken visual result
The overlay layer itself is wider than the screen.
Correct code
Bounded overlay.menu-backdrop {
position: fixed;
inset: 0;
width: auto;
}
.menu-strip {
position: absolute;
left: 18px;
right: 18px;
max-width: calc(100% - 36px);
}Fixed visual result
The overlay uses the viewport without exceeding it.
inset:0 and safe inner spacing instead of widening the overlay manually.The transform distance is based on the wrong box
Transform-based drawers are usually better than negative offsets, but they still need the right containing layer. If the panel is inside a normal page wrapper or has a desktop-sized width, translating it can still leave a visible or scrollable leak. The panel should be sized for the viewport and transformed from a fixed edge.
Broken code
Wrong transform context.drawer {
position: absolute;
right: 18px;
width: 320px;
transform: translateX(82%);
}Broken visual result
The drawer is translated from a box that is already too wide.
Correct code
Safe transform state.drawer {
position: fixed;
right: 0;
top: 0;
bottom: 0;
width: min(320px, 88vw);
transform: translateX(100%);
}
.drawer.is-open {
transform: translateX(0);
}Fixed visual result
The transform belongs to a viewport-sized drawer system.
A production-minded offscreen menu pattern
A strong offscreen menu keeps the drawer in a fixed overlay layer, uses a fluid width, moves with transform, avoids negative document offsets, locks page interaction intentionally, and never relies on the body hiding horizontal overflow to cover a bad menu state.
Premium code
Safe drawer system.drawer-layer {
position: fixed;
inset: 0;
pointer-events: none;
overflow: clip;
z-index: 1000;
}
.drawer-layer.is-open {
pointer-events: auto;
}
.drawer {
position: absolute;
inset: 0 0 0 auto;
width: min(340px, 88vw);
max-width: 100%;
transform: translateX(100%);
transition: transform .22s ease;
}
.drawer-layer.is-open .drawer {
transform: translateX(0);
}Premium visual result
The page width stays stable while the drawer opens and closes.
Fast practical rule
If an offscreen menu creates horizontal scroll, do not start by adding overflow-x:hidden to the whole site. First test the closed menu state. Remove negative offsets, replace document-based positioning with a fixed overlay layer, make the drawer width fluid, and move the drawer with a controlled transform.
Debug checklist
- Inspect the closed menu state, not only the open menu state.
- Search for
right:-,left:100%,left:100vw, and large translate values. - Check whether the drawer is
absoluteinside the document instead offixedto the viewport. - Replace fixed drawer widths with
width:min(340px, 88vw)or a similar safe value. - Use
inset:0for the overlay layer instead of manually setting oversized viewport widths. - Keep the backdrop, drawer, and inner menu strips bounded to the same viewport layer.
- Avoid solving the problem only with
body { overflow-x:hidden; }. - Test the page width while the menu is closed, opening, and fully open.
left:100%.Related fixes that can help
Offscreen menu overflow often connects to mobile menu bugs, hidden page width, unsafe viewport units, absolute positioning, and negative offsets.
Final takeaway
An offscreen menu creates horizontal scroll when the closed state still occupies or leaks into scrollable space. The menu may look hidden, but if its box sits outside the viewport with negative offsets, oversized widths, or unsafe transforms, the page can become wider than the screen.
Build the drawer as a fixed overlay layer, give it a fluid width, keep the backdrop bounded, and animate with transform inside a safe system. That lets the menu slide without dragging the entire document width along with it.
The cleanest test is simple: the document should not become wider when the menu component exists on the page. A closed drawer, an open drawer, and an animating drawer should all preserve the same viewport width. If any state creates sideways scroll, the drawer system still needs safer boundaries.