How to Screenshot a Web Page with a Collapsed Responsive Navigation Menu

To screenshot a web page with its responsive navigation collapsed, set the browser to a viewport narrow enough to trigger the site’s mobile breakpoint, verify the menu is actually collapsed, then capture the visible viewport or the full page. The viewport dimensions determine which responsive layout appears; a screenshot tool cannot force a site to show its collapsed menu if the chosen width does not trigger it.

1. Set the responsive viewport

Chrome

1. Open the page in Chrome and open DevTools.
2. Toggle the device toolbar. Device Mode opens in a responsive viewport by default.
3. Set the viewport width and height you want to document. If the site’s breakpoint is unknown, reduce the width until the navigation changes to its collapsed presentation.
4. Look at the page itself. Confirm the desktop links have collapsed and the menu button or other expected mobile navigation is visible. Wait for the page to finish rendering before capture.

Chrome describes Device Mode as a way to “simulate the mobile user experience from your laptop or desktop.” It is useful for responsive layout checks, but it cannot simulate every aspect of a physical device. Test on real hardware too when device-specific behavior matters. See the Chrome Device Mode documentation.

Firefox

1. Open the page in Firefox and start Responsive Design Mode in Developer Tools.
2. Choose the target viewport dimensions and verify the navigation is collapsed on the page.
3. Use the screenshot control for the visible viewport, or enable and use the full-page screenshot button when you need the whole document.

Firefox documents both responsive viewport capture and full-page capture. Its screenshot icon may need to be enabled in DevTools settings. You can also capture the full page from the Web Console with :screenshot page.png --fullpage. For an element-only capture, use the Inspector’s “Screenshot Node” action on the navigation element. See Responsive Design Mode and Taking screenshots.

2. Choose viewport or full-page capture

Capture	What it shows	Use it when
Viewport	The currently visible browser area at the selected responsive dimensions.	You need to show how a visitor sees the collapsed navigation on arrival.
Full page	The whole document, including content outside the visible viewport.	The page’s complete length and content matter alongside the responsive layout.
Selected element	A chosen page element, such as the navigation component.	You need evidence of the menu itself rather than the surrounding page.

A full-page image is not interchangeable with a viewport image: it documents a different composition. For a viewport screenshot, use Chrome’s Device Mode menu and choose Capture screenshot. For the entire document, choose Capture full size screenshot. In Firefox, use the viewport screenshot control or its full-page option.

3. Check the result

Open the saved image and check these details before sharing it:

• The viewport was narrow enough to activate the intended breakpoint.
• The navigation is visibly collapsed in the captured image.
• The page finished rendering and the screenshot shows the intended page state.
• The capture type matches the purpose: viewport for the initial mobile composition, full page for the complete document, or a selected element for just the menu.

Common problems and fixes

Problem	Likely cause	Fix
The screenshot shows desktop navigation.	The responsive viewport is wider than the site’s breakpoint, or the layout has not updated.	Reduce the viewport width and confirm the menu has collapsed before capturing.
The screenshot is cut off at the bottom.	You captured the visible viewport rather than the full document.	Use Chrome’s full-size capture or Firefox’s full-page screenshot option.
The screenshot shows the wrong page state.	The page had not finished rendering, or the capture was taken before the responsive layout updated.	Wait for rendering to finish, confirm the collapsed state in the page, then capture again.
Firefox’s screenshot control is missing.	The screenshot button may be disabled in DevTools settings.	Enable it in DevTools settings, or use the documented full-page Web Console command.
The emulated view differs from a phone.	Device Mode approximates a mobile viewport and does not reproduce every real-device behavior.	Use a physical device when the behavior depends on hardware or other device-specific conditions.

Performance, repeatability, and cost

For a one-off image, browser DevTools avoids setting up a separate capture workflow. To make repeated captures comparable, record the viewport width and height and use the same capture type each time. Responsive breakpoints belong to the site, so verify the menu state for each page rather than assuming one width works everywhere.

Device emulation is useful for documenting layout, but it is not a substitute for physical-device checks when the distinction matters. Browser capture also depends on the page having reached the intended rendered state; wait and inspect before saving the evidence.

Or skip the browser setup

ScreenshotNeo is a website screenshot API and MCP server. Make one GET request for a screenshot, and set the viewport to a width that triggers the page’s collapsed navigation. The API accepts a URL and returns an image or PDF; see the ScreenshotNeo API documentation for the available parameters.

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"},
    timeout=90,
)
open("shot.webp", "wb").write(r.content)

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status}`);
await import('node:fs/promises').then(fs => fs.writeFile('shot.webp', Buffer.from(await res.arrayBuffer())));

Replace the example URL with the page you need. Set the viewport dimensions using the API’s viewport parameters, and verify the resulting image shows the collapsed state. ScreenshotNeo removes cookie and consent banners, newsletter popups, and chat widgets before capture; each cleanup step can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed, and response headers report the page verdict and billing status. Its MCP server gives AI agents tools for screenshots, page information, and PDF capture. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000 shots. Sign up for free and capture 1,000 screenshots a month without a card.

FAQ

How do I take a screenshot of a responsive website?

Set the browser to the target responsive viewport, verify the page has switched to the layout you need, then capture the viewport or full page.

How do I capture a mobile view of a web page?

Use Chrome Device Mode or Firefox Responsive Design Mode, choose the desired viewport dimensions, and capture after checking the page state.

How can I capture only the collapsed menu?

Use Firefox Inspector’s “Screenshot Node” action on the navigation element. For a full-page or viewport capture, use the corresponding browser screenshot control.

Does a narrow viewport guarantee the menu will be collapsed?

No. The site controls its breakpoints and navigation behavior. Check the page before saving the image.