Tutorials
Claude Opus 5.5: fix section links hidden by a sticky header
Ask Claude Opus 5.5 to measure the header's occupied space and identify the actual scroll container before adding an offset to section links.
Ask Claude Opus 5.5 to measure the header's occupied space and identify the actual scroll container before adding an offset to section links. A heading can exist at the correct URL fragment and still be hidden behind navigation. The fix must also survive a wrapped menu, a promotional banner, and keyboard focus.
A developer's fixed-header question reports this exact symptom. It is community context, not a diagnosis of your page. The following is a proposed repair workflow with a calculated layout example, not an executed Opus test.
Find where the missing space belongs
| Situation | Inspect | Likely place for the correction |
|---|---|---|
| Every section target is hidden | Scroll container and overlay height | Container scroll padding |
| One target needs extra separation | That target's alignment | Target scroll margin |
| Mobile menu wraps to two rows | Actual occupied header height | Responsive or measured offset |
| A focused control is hidden | Keyboard path and all overlays | Focus visibility, not only fragment scrolling |
MDN describes scroll-margin-top as an offset associated with the target's scroll area. Do not confuse it with visible layout margin. W3C technique C43 demonstrates scroll padding for obscured content. A single passing anchor jump is not a complete accessibility assessment.
Calculate one offset, then verify it
Suppose a fictional page has a 64 CSS-pixel fixed navigation bar and a 32-pixel promotional strip stacked directly above it. They occupy 96 pixels; an additional desired 16-pixel gap gives 112 pixels. If the navigation wraps to 88 pixels, the total becomes 136 pixels. These are assumed dimensions and arithmetic, not measurements of Panelly.
For a horizontal writing mode with the document as scroll container and a confirmed 96-pixel overlay, a starting example is:
html { scroll-padding-top: 112px; }The value includes the intended gap. Do not also add 112 pixels of target scroll margin by habit: combining both can create an excessive offset. If only one target needs extra space, choose a deliberate target-specific allowance. Confirm the real scrolling element when content lives inside a panel; styling `html` will not configure a different scroller.
A fixed number will become stale if a banner appears or a menu wraps. Prefer a layout that avoids overlap, a suitable responsive value, or a carefully measured shared height. Test after fonts load. When a large header consumes too much of a narrow screen, making it non-sticky may be a better design than increasing the offset indefinitely.
Copyable Opus repair prompt
Use the official Opus guide with this brief:
Inspect the supplied page markup, computed styles, header and banner dimensions, and failing fragment URL. Identify the actual scroll container and every fixed or sticky overlay affecting the target.
Separate normal-flow spacing, container scroll padding, and target scroll margin. Calculate the occupied height plus the requested visual gap. Do not stack offsets without explaining their combined effect. Account for wrapped navigation, font loading, and banner dismissal.
Propose the smallest patch that preserves the existing fragment IDs and links. Keep native navigation where practical. Do not force focus to a heading merely to make a screenshot look right; explain any deliberate focus-management change.
Return tests for an in-page click, a directly loaded fragment URL, browser Back, keyboard Tab and Shift+Tab, and 320/390/1440 CSS-pixel layouts. Include zoom and a two-row header. Record target visibility and focused-control visibility separately. Leave browser results pending unless actually observed.Test the two user journeys
First, click a section link and load the same fragment URL directly in a new navigation. Check the heading's top edge after fonts and images settle, then use Back. Preserve existing IDs so saved links remain useful. A correction that works only after clicking a custom handler has not passed the direct-link case.
Second, move through links and controls with Tab and Shift+Tab. Check that the focused item is visible under both top and bottom overlays. Do not infer keyboard behavior from a mouse screenshot. Repeat with the banner closed and open, then at increased zoom. Record failures by viewport and state so the next fix addresses a reproducible case.
Common decisions
**Does normal padding fix every anchor?** It changes layout; scroll alignment needs separate inspection.
**Should every jump use JavaScript?** Start with native links and CSS when they satisfy the actual cases.
**Can one desktop test finish the job?** Wrapped navigation and zoom can change the occupied space.
Once section navigation works, create matching campaign visuals in Panelly Studio. For motion during navigation, the reduced-motion review covers a separate preference-sensitive behavior.
