Should Shopify merchants check mobile overflow on every page after changing their navigation?
You change a menu, open the homepage on your laptop, and it looks normal.
That does not mean the store is ready.
Navigation sits near the top of every page. A small width problem there can push the whole page wider than a phone screen. The result is horizontal scrolling, clipped content, or a button that only appears after someone swipes sideways.
We found this on our own site. Every page on lunalink.ai scrolled sideways by 59 pixels on mobile. The navigation needed 430 pixels. The phone viewport gave it 375.
We had looked at the site dozens of times. We had not looked at it in a phone-sized viewport.
So yes: after changing navigation, check mobile overflow on every page layout. Not just the homepage and not just the navigation drawer.
Why a navigation change affects more than the menu
A header is shared across the store, but it does not always behave the same way everywhere.
Your product template may load a different announcement bar. A collection page might have filtering controls near the header. Blog pages can use another section group. A page built with a page builder may add its own wrapper, padding, or CSS.
One fixed-width element can be enough.
Say your mobile header contains a logo, search icon, account icon, cart icon, and a menu button. Each item may look small on its own. Together, they may exceed the available width. A `min-width`, a long menu label, or a negative margin can create the last few pixels of overflow.
Those pixels matter. Shopify notes that horizontal overflow can hide content, make layouts cramped or unpredictable, block links and buttons, and create accessibility problems.
Desktop often hides the issue because there is plenty of room. A phone does not.
Check layouts, not only URLs
You do not need to open every product one by one if they use the same template. But you should check every distinct layout and any page with custom sections.
A practical list is:
- Homepage
- Product page
- Collection page
- Search results
- Cart
- Blog index and article
- Standard page, such as About or Contact
- Policy pages
- Any landing page built separately
- Customer account pages, if your theme controls their surrounding layout
Also check pages with unusually long titles, menu labels, product names, or announcement text. Those are where a layout that seemed fine can break.
If a navigation change also changed menu nesting, check the menu itself on mobile. Shopify lists menu nesting, menu links, the menu selected in the theme, custom code, and navigation apps as possible causes when menus do not behave as expected.
Older sectioned themes may not support three or more levels of navigation. Online Store 2.0 themes support multilevel navigation. That difference is worth checking before you assume a deep menu is a CSS problem.
A one-minute first check
Open your storefront in Chrome.
Then:
1. Open browser developer tools. 2. Turn on the device toolbar. 3. Set the viewport width to 320 px. 4. Reload the page. 5. Try to swipe the page sideways. 6. Repeat at 375 px and 414 px.
At each width, look for three things:
- The page does not move sideways.
- Nothing is cut off at the right edge.
- Buttons, links, and menu controls remain visible and usable.
Shopify specifically recommends those three viewport widths and checking that all content is visible without horizontal scrolling.
Do this first on the homepage. If it fails there, you have a clear problem to fix before checking the rest.
Then run the same check through the layouts in your list.
How to find the element causing overflow
When a page scrolls sideways, do not start by changing random CSS rules.
First, find what is wider than the viewport.
In the browser console, paste this:
```js [...document.querySelectorAll('*')] .filter(el => el.scrollWidth > document.documentElement.clientWidth) .map(el => ({ element: el, width: el.scrollWidth })) ```
This gives you a list of elements wider than the visible page width. It may include parent elements as well as the original cause, so start with the smallest or most specific item in the list.
Common causes include:
- A header row with `min-width`
- A navigation list that will not wrap or collapse
- A wide image or embedded video
- A `width: 100vw` element inside a padded container
- Negative margins on a section
- A pop-up, app block, or sticky element positioned outside the viewport
- Long unbroken text, such as a URL or product code
In our case, the measurement made the problem plain. The navigation needed 430 pixels. The viewport was 375 pixels. We did not need a theory about mobile behaviour. We needed to make the navigation fit or change how it collapsed.
After fixing the element, reload the live storefront and repeat the width checks. Do not only inspect the theme editor preview. The live store can load different app code, settings, or cached assets.
Test a real phone too
Browser tools are useful, but they are not the whole test.
Shopify recommends checking actual mobile devices across screen sizes and orientations. Use a phone you have available. Open the homepage, a product page, a collection, and the cart.
Try these actions:
- Open and close the menu.
- Open a nested menu.
- Tap every header icon.
- Rotate the phone.
- Scroll to the bottom, then back to the top.
- Add an item to cart and open the cart.
Shopify’s store-design checklist also calls out images, menus, and checkout on smaller screens. Navigation is not done if it opens but makes the rest of the page difficult to use.
Check keyboard behaviour when your menu has dropdowns
Mobile overflow is a visual problem, but navigation also needs to work without a mouse.
For dropdown navigation, Shopify’s accessibility guidance calls for clear state and keyboard control. The menu launcher should expose `aria-expanded` and `aria-controls`. Enter and Space should open it. Tab should move into it. Escape should close it and return focus to the launcher.
You can test much of this in under a minute on a desktop browser:
1. Click into the page, then press Tab until the menu control has focus. 2. Press Enter or Space. 3. Press Tab to move through the opened links. 4. Press Escape.
The menu should close, and focus should return to the control that opened it.
For touch targets, Shopify documentation gives different figures in different places: 44×44 px, 48×48 px, and 24×24 CSS px. If you are choosing a target size, use 48×48 px. It is the strictest recommendation and gives people more room to tap.
Make this part of the change, not a later task
A navigation edit is not only a menu edit. It is a layout change across your storefront.
The simple habit is to keep a short mobile checklist with the navigation change itself. Check the main layouts at 320 px, 375 px, and 414 px. Check a real phone. Check the menu’s links, nesting, and keyboard behaviour.
This takes less time than finding out later that every page has been sliding 59 pixels sideways.
Before publishing your next navigation change, open the homepage at 375 px and try to drag it sideways. If it moves, stop there and find the element that is wider than the viewport.