How to Fix Website Screenshots with Clipped Dropdown Menus

A dropdown missing from a screenshot is usually caused by one of two things: the screenshot’s viewport, element, or clip bounds exclude part of it, or the page itself clips or covers the menu. First check whether the menu is fully visible in the rendered page. If it is, fix the capture scope; if it is not, inspect ancestor overflow and stacking contexts.

For repeatable captures, set the viewport that triggers the intended responsive layout, open the dropdown, then capture the menu, a containing element, a deliberate clip region, or the full page. A full-page screenshot includes the scrollable document, but does not by itself open a transient menu.

1. Diagnose whether the page or screenshot is clipping the menu

1. Open the dropdown in the browser at the viewport size you intend to capture.
2. Check its edges. If it is fully visible in the browser but truncated in the image, inspect screenshot mode, element selection, clip coordinates, and output dimensions.
3. If it is already cut off or hidden in the browser, inspect the menu’s ancestors for overflow clipping and check whether another stacking context covers it.

This order avoids changing page CSS to compensate for a screenshot rectangle that is simply too small. The underlying checks follow from Playwright’s documented screenshot scopes and CSS overflow and stacking behavior.

2. Choose the right screenshot scope

Capture method	Use it when	Watch for
Viewport screenshot	The visible browser screen is the intended output.	Content outside the viewport is not included.
Full-page screenshot	You need the scrollable document in one image.	It does not ensure a transient dropdown is open or correctly positioned.
Element screenshot	The dropdown or a particular component is the deliverable.	The selected element is captured without necessarily including useful surrounding context.
Clip rectangle	You know the exact region to include.	Incorrect x, y, width, or height can cut off the menu.

Playwright describes a full-page screenshot as a capture of the full scrollable page, “as if you had a very tall screen and the page could fit it entirely.” See the [Playwright screenshots guide](https://playwright.dev/docs/screenshots) for the current screenshot API and options.

3. Capture an open dropdown with Playwright

The following runnable Node.js example uses Playwright’s test runner. It navigates to a page, opens a menu by clicking its button, and saves a screenshot of the menu element. Replace the URL and selectors with those for your page. Install the current Playwright test package and browser as described in the [official installation guide](https://playwright.dev/docs/intro); check the documentation for the version installed in your project if an option differs.

// dropdown.spec.js
const { test, expect } = require('@playwright/test');

test('capture an open dropdown', async ({ page }) => {
  await page.setViewportSize({ width: 1440, height: 1000 });
  await page.goto('https://example.com', { waitUntil: 'domcontentloaded' });

  // Use the accessible name and menu selector from your page.
  await page.getByRole('button', { name: 'Products' }).click();
  const menu = page.locator('[role="menu"]');
  await expect(menu).toBeVisible();
  await menu.screenshot({ path: 'dropdown.png' });
});

Run it with:

npx playwright test dropdown.spec.js

If you need surrounding context, capture a containing element instead. For a known rectangle, use the page screenshot’s clip option. A viewport or full-page screenshot is appropriate when the whole page is the intended deliverable.

// Capture a region after opening the menu.
await page.screenshot({
  path: 'dropdown-region.png',
  clip: { x: 700, y: 80, width: 500, height: 650 }
});

// Capture the full scrollable page after opening the menu.
await page.screenshot({ path: 'full-page.png', fullPage: true });

Clip coordinates and element dimensions must contain the entire visible menu. If a menu extends beyond the viewport, decide whether the intended result is a viewport image, a larger clip, or an element image; these represent different output scopes.

4. Fix page-level clipping from CSS overflow

If the menu is clipped in the live page, inspect its containing elements in browser developer tools. Check each ancestor’s dimensions and computed overflow, overflow-x, and overflow-y. MDN documents that hidden and clip clip content that extends outside a constrained box. See [MDN’s overflow reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/overflow).

/* Example only: remove or change this rule only if this is the ancestor
   that actually clips the dropdown and the layout allows overflow. */
.dropdown-container {
  overflow: visible;
}

Do not remove overflow rules indiscriminately. A panel, carousel, or scrollable region may depend on them. Depending on the component, an appropriate fix may be to relax the responsible container constraint, move the menu elsewhere in the DOM, or use the framework’s supported overlay mechanism. Verify the change at the target viewport and with the menu open.

5. Fix menus hidden behind other content

A menu that is present but appears behind another element may be in a lower stacking context. Stacking contexts are self-contained: a child’s z-index is compared within its parent context, so a very large child value cannot necessarily raise the entire parent above a sibling context. Inspect the menu and its ancestors, identify the relevant stacking contexts, and adjust the appropriate parent or layout level.

MDN’s [stacking context guide](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Positioned_layout/Stacking_context) explains the hierarchy, and its [nested menu example](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Positioned_layout/Stacking_context/Example_3) demonstrates how a menu can appear beneath a neighboring menu because of that hierarchy. Depending on the layout, solutions include avoiding the overlap, changing stacking order at the correct level, or flattening the hierarchy. Raising the child’s z-index alone is not a universal fix.

6. Make automated captures repeatable

1. Set the viewport before navigation when viewport size affects responsive layout.
2. Navigate to the page and wait for the control you need.
3. Open the dropdown using the same interaction a user would perform.
4. Wait until the menu is visible, then capture the scope that includes it.
5. Keep the viewport, selectors, and capture bounds consistent between runs.

For a flaky page, wait on a meaningful menu state rather than relying on an arbitrary delay. The example uses a visibility assertion before capture. If animation changes the menu’s dimensions or position, account for the settled state your screenshot is meant to show.

Or skip the browser setup

ScreenshotNeo is a website screenshot API and MCP server for developers. One GET request returns an image or PDF; see the [ScreenshotNeo documentation](https://screenshotneo.com/docs/) for parameters and response details.

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())));

ScreenshotNeo accepts cookie and consent banners like a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; each step can be turned off. Bot checks and CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing, and response headers identify the page verdict and billing status. Its MCP server offers screenshot, page information, and PDF tools for Claude, Cursor, and other MCP clients. The free plan includes 1,000 shots per month with no card; paid plans start at $5 for 3,000 shots. All features are available on every plan. [Try ScreenshotNeo free](https://screenshotneo.com/account/sign-up/).

Troubleshooting

Symptom	Likely cause	What to check or change
Menu is visible in browser but cut off in the image	Viewport or clip bounds exclude it, or the wrong element was captured.	Check screenshot mode and dimensions; capture a larger region or the relevant containing element.
Menu is cut off in the live page too	A constrained ancestor clips overflowing content.	Inspect computed overflow and dimensions up the ancestor chain; change the responsible layout rule only.
Increasing z-index has no effect	The menu is inside a lower stacking context.	Trace ancestor contexts and adjust the parent-level stacking or layout.
Full-page capture has no dropdown	The transient menu was never opened, or closed before capture.	Open it and verify visibility before taking the full-page screenshot.
Menu appears at a different size or position	The capture viewport triggers a different responsive layout.	Set the intended viewport before navigation and opening the menu.
Element capture fails or captures the wrong area	The selector does not identify the visible menu, or the menu is not yet rendered.	Use a selector for the open menu, wait for visibility, and verify the locator in the page.

Performance, reliability, and cost notes

• Performance: Capturing only the dropdown can produce a smaller, more focused artifact than capturing a tall page. The right choice depends on whether surrounding context is required.
• Reliability: A fixed viewport, explicit interaction, and visibility check make browser automation more repeatable. Menus with animations, delayed content, or hover-only behavior may need page-specific handling.
• Cost: A local Playwright capture uses your browser automation setup. For hosted captures, ScreenshotNeo bills only clean shots; its free tier is 1,000 per month, and paid plans begin at $5 for 3,000. Check current plan details on its site before choosing a plan.

FAQ

Can a screenshot include a dropdown that extends beyond the viewport?

It depends on the capture scope and page layout. A clip or element capture can target the menu, but page-level overflow may still clip it. Diagnose the live page first, then choose bounds that include the intended result.

Why does a full-page screenshot still omit my open menu?

Full-page capture covers the scrollable page; it does not perform the interaction that opens a transient menu. Open the menu and verify its state before capture.

Should I always use overflow: visible?

No. First identify the ancestor that clips the menu and understand why its overflow is constrained. Changing the wrong container can break scrolling or other layout behavior.

Does a larger z-index always put the menu on top?

No. The menu is stacked within its parent stacking context. If that context is behind another one, changing the child alone may not change the result.