How to Capture a Full-Page Screenshot Without Repeating a Sticky Navigation Bar

A sticky or fixed navigation bar can get in the way of a full-page screenshot, especially when a capture workflow scrolls or stitches sections. In Firefox, select the header in Developer Tools’ Inspector and press H to hide it, capture the page, then press H again to restore it. If you do not need the header or the rest of the page, capture the article element instead.

Firefox supports screenshots of the whole page and a single element. The exact handling of sticky elements can vary by capture implementation, so inspect the result rather than assuming every browser repeats the bar. Mozilla’s screenshot documentation describes both capture options.

Why a sticky bar can appear in an unwanted position

A position: fixed element is generally positioned relative to the viewport. A position: sticky element behaves like a normally positioned element until it reaches a threshold, then sticks relative to its nearest scrolling ancestor. A capture implementation that scrolls or stitches page regions may therefore produce an unwanted header placement. CSS defines the positioning behavior, but it does not guarantee that all screenshot tools handle sticky elements in the same way. See MDN’s position reference.

Hide the navigation in Firefox Developer Tools

1. Open the page in Firefox and open Developer Tools. Select the navigation or header element in the Inspector. If selecting it on the page is difficult, find it in the Inspector’s DOM tree.
2. With the element selected, press H. This toggles the selected node’s visibility. Mozilla documents this Inspector shortcut in its Developer Tools tips.
3. Capture the full page using the screenshot button in the Developer Tools toolbar, or open the Web Console and run the command below.
4. Press H again to restore the navigation. The shortcut is a toggle, so remember to restore the page before continuing your work.

:screenshot --fullpage

If the screenshot button is missing, enable it in Developer Tools Settings under “Available Toolbox Buttons.” The Web Console command is a direct alternative. Firefox’s :screenshot command also supports options such as --selector, --delay, --dpr, --clipboard, --file, and --filename. Consult the official command reference for their syntax. Avoid reusing a filename unless you intend to overwrite the existing image.

Use Firefox’s screenshot interface

For a quick capture, right-click an empty area of the page and choose Take Screenshot, or use Ctrl+Shift+S on Windows or Linux, or Command+Shift+S on macOS. Choose Save full page. Firefox’s interface also supports visible-area, region, and element captures, and lets you download the result or copy it to the clipboard. See Mozilla Support’s Firefox screenshot guide.

Try the full-page interface first when the header’s placement is acceptable. If it appears in an unwanted position, hide the node with the Inspector before capturing, or capture only the content element.

Capture only the article or content element

When the navigation is not part of the desired image, an element screenshot avoids including it. In Firefox, select the content node and use Screenshot Node, or use the console helper’s --selector option with a CSS selector. The selector should identify the article or main content container, not a broad wrapper that also includes navigation.

:screenshot --selector "article"

Replace article with a selector that matches the page, such as #main-content or .post-body. A selector capture includes the selected element and its descendants. If the selector matches multiple elements or the wrong node, inspect the result and narrow the selector.

Choose the right capture method

Method	Use it when	Trade-off
Full-page screenshot	You need one tall image with the page context intact.	The sticky bar may still be present; hide it first if its placement is unwanted.
Hide the selected node with H	You want the whole page but not a particular header.	It changes the page temporarily; toggle it back after capture.
Screenshot Node or --selector	You need only the article or a specific content region.	Anything outside that element, including useful page context, is excluded.
Visible-area capture	You need only what is currently in the viewport.	It does not include content outside the visible area.

Common problems and fixes

Problem	Likely cause	Fix
The header is still visible.	The wrong node was selected, or the capture was taken before hiding it.	Check the selected node in the Inspector, press H, and verify that the header disappears before capturing.
The header is gone after the screenshot.	H toggles visibility and was not toggled back.	Select the same node and press H again, or refresh the page if you have lost track of the selection.
The screenshot button is unavailable.	The screenshot toolbar button may not be enabled.	Enable it in Developer Tools Settings under “Available Toolbox Buttons,” or run :screenshot --fullpage in the Web Console.
The element screenshot is empty or incomplete.	The selector may not match the intended content node.	Inspect the page structure, choose a selector that matches the article container, and capture again.
A previous image was replaced.	The new screenshot used the same output filename.	Choose a different filename when saving. Mozilla notes that saving again under the same name overwrites the earlier image.
The output is too large or slow to handle.	A full-page image can contain a large document area.	Capture just the content node or visible area if that satisfies the task; use the documented delay or device-pixel-ratio options when appropriate.

Reliability, performance, and cost

For a one-off manual capture, Firefox’s built-in tools avoid the setup and service cost of an external screenshot product. Full-page screenshots can be large, and pages with long content or delayed loading may take longer to capture. If the page is still changing, use the screenshot command’s documented delay option or wait until the content has settled. Check the final image for lazy-loaded content, overlays, and sticky elements.

For repeatable captures across many URLs, browser setup and manual node selection add work. A screenshot API can make captures part of a script, but results still depend on the page loading and the options used. Do not assume all tools treat sticky navigation identically; validate representative pages before relying on a workflow.

Or skip the browser setup

ScreenshotNeo is a website screenshot API and MCP server. One GET request returns an image or PDF. It removes cookie and consent banners, newsletter popups, and chat widgets before capture; each cleanup step can be turned off. Bot checks, blank pages, failed loads, timeouts, and cache hits are not billed, with the page verdict and billing status included in response headers. AI agents can use its MCP server tools to take screenshots, get page information, and capture PDFs.

For a full-page WebP capture, use the API call below. See the ScreenshotNeo documentation for API options, including full-page capture and element selection.

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}`);
const fs = await import('node:fs/promises');
await fs.writeFile('shot.webp', Buffer.from(await res.arrayBuffer()));

The free plan includes 1,000 screenshots per month with no card. Paid plans start at $5 for 3,000 screenshots; every feature is on every plan. The product also supports 12 device presets and custom viewports, retina scale, dark mode, custom CSS and JavaScript, selector capture, wait conditions, request blocking, caching, signed links, async jobs, bulk capture, and more. Plans and options are listed on the ScreenshotNeo site.

Sign up free for 1,000 screenshots a month, with no card required.

FAQ

Does Firefox always repeat sticky headers in a full-page screenshot?

No universal behavior is established. CSS describes how sticky and fixed positioning works, while screenshot implementations can differ. Check the captured image and hide the node or capture a content element if needed.

Can I keep the header and still get a clean full-page image?

Yes. If it is positioned acceptably in the capture, leave it visible. If it obstructs content, hide it only for the capture and restore it afterward.

Do I need an extension?

No. Firefox includes full-page and element screenshot workflows in its built-in screenshot interface and Developer Tools.