Can a Shopify navigation make every page scroll sideways on mobile?
You open your Shopify store on a phone and swipe left.
The product grid moves. The logo moves. The header moves. There is a strip of blank space at the right edge.
That is not a mobile navigation pattern. It means something on the page is wider than the phone viewport.
A navigation can cause it. So can a promo bar, a search field, a logo, a slideshow, or a section lower on the page. The header is often blamed because it is the first thing you see, but it still needs checking rather than guessing.
We found this on our own site. Every page on lunalink.ai could scroll sideways by 59 pixels on mobile. The navigation needed 430 pixels. A phone viewport gave it 375 pixels.
We had looked at the site dozens of times. We had not looked at it in a phone-sized viewport.
A scrolling menu is not the same as a scrolling page
Some horizontal scrolling on mobile is deliberate.
Shopify's Horizon theme, for example, can show a horizontal row of mobile navigation links. Its links sit inside a dedicated scroll container with `overflow-x: auto`. The links can be wider than that container, but the container itself stays within the page.
That is different from giving the whole document extra width.
A useful test takes a few seconds:
- Open your store on a phone.
- Start near the middle of the page, not inside a carousel or product row.
- Swipe left and right.
- Watch the logo or the page edge.
If only a row of products or menu links moves, that row may be designed to scroll. If the logo, header, and page background move too, the page is too wide.
Shopify treats full-page horizontal overflow as a problem. Mobile customers expect to move down a page. Content that sits off-screen can hide buttons, links, and other useful parts of the store.
How a navigation becomes too wide
Headers collect small pieces of layout that can add up badly on a narrow screen.
Say your mobile header has:
- A menu button
- A logo with a fixed width
- A search icon
- An account icon
- A cart icon
- Padding on both sides
Each item may look reasonable on its own. Together, they may not fit.
The same issue can happen in a visible navigation row. A theme may place links next to each other, prevent them from wrapping, and give the row a fixed or minimum width. If the row is not inside a container that handles its own overflow, it can widen the whole page.
Our own problem was that simple. The navigation required 430 pixels. The viewport was 375 pixels. The missing 55 pixels, plus surrounding layout, showed up as 59 pixels of sideways movement.
This can also come from a change that was meant to be harmless:
- A longer menu label, such as “Shipping and returns”
- A larger logo file or logo width setting
- A new announcement bar
- Extra header icons from an app
- A custom CSS rule that stops items wrapping
- A positioned element that extends past the screen edge
Shopify lists fixed-width elements, oversized images, absolute positioning, and CSS transforms among common causes of content wider than the mobile screen. The navigation is only one place those rules can appear.
Check the page width before changing the menu
Do not start by hiding overflow with this rule:
```css html, body { overflow-x: hidden; } ```
It can remove the visible symptom while leaving a clipped button or link off-screen. You want to find the element causing the width, then fix that element.
First, check whether the issue appears on more than one page.
Open your homepage, a product page, a collection page, and a policy page on a phone. If all of them move sideways, look at shared theme parts first:
- Header
- Announcement bar
- Footer
- Global app embeds
- A site-wide custom CSS file
If it happens only on one template, inspect the sections unique to that page instead.
You can also do a quick check in your browser's developer tools. Open the mobile view, then look for the element that extends beyond the right edge. Temporarily hiding suspected header pieces can help narrow it down.
For example, hide the announcement bar. Test again. Hide the navigation row. Test again. Reduce the logo width. Test again.
Change one thing at a time. Otherwise you will not know which part fixed the problem.
What to inspect in the theme
In Shopify admin, go to Online Store → Themes → Edit code. Start with the files that build the shared header. Their names vary by theme, but often include `header`, `navigation`, `menu`, or `theme.liquid`.
Search for these CSS properties:
```css width: min-width: white-space: nowrap; position: absolute; transform: overflow-x: ```
None of them is automatically wrong. The question is where they are used and what contains them.
A navigation row using `white-space: nowrap` may be fine if it lives inside a container with controlled horizontal scrolling. It is risky if it sits directly in the page layout with no width limit.
A fixed width may be fine on desktop. It needs a mobile rule that lets the element shrink, wrap, or switch to a drawer.
Horizon shows another useful approach. Its mobile navigation bar is optional, not automatic. When that setting is off, it uses a mobile drawer instead. Its drawer scrolls vertically, while only selected areas such as featured content are allowed to scroll horizontally.
That separation matters. A component can have its own scrolling behaviour without making every page wider.
Fix the layout, not the symptom
The right fix depends on what you find.
If the logo is too wide, reduce its mobile width. If navigation links cannot fit, use a drawer or let the link area scroll inside its own container. If a header item is absolutely positioned, make sure it does not extend past the viewport.
If you deliberately want a horizontal menu row, keep the overflow on that row.
A simplified pattern looks like this:
```css .mobile-menu-scroll { max-width: 100%; overflow-x: auto; }
.mobile-menu-list { display: flex; width: max-content; gap: 15px; } ```
The outer element is the boundary. The inner list can be as wide as it needs to be, but it should not make `body` wider.
Test after each change on a real phone if you can. Browser mobile previews are useful, but touch behaviour and browser bars can change what you notice.
Also test pages with the longest real menu labels, not placeholder text. A header that fits “Shop” may fail when the menu includes “New arrivals” and “Customer service.”
Do not assume your theme is immune
Even maintained themes can have mobile overflow bugs. Shopify's Horizon release notes include fixes for a collection grid that overflowed the page and a slideshow that briefly showed a horizontal scrollbar.
That is normal software work. A theme can have sensible patterns and still need fixes as sections, settings, and browsers change.
The practical habit is simple: check your own store at phone width after changing the header, adding an app embed, editing custom CSS, or installing a new theme version.
Open the homepage on your phone now and try one sideways swipe. If the page moves, measure what is wider than the screen before you hide the scrollbar.