>_Building AppsWithout Code
Mobile & layout / DETAILED TASK GUIDE

Fix header overlap

Header overlap often appears after making navigation fixed or sticky. The correct fix depends on whether the whole page is covered or only anchor destinations land behind the header.

BY BUILDING APPS WITHOUT CODEUPDATED OCT 14, 2026AI-ASSISTED TASK

Before you start

  • The header position rule and its actual height.
  • A page or anchor where overlap occurs.
  • An AI assistant with access to the layout.

How to do it

  1. Determine whether the header is fixed, sticky, or inside another scrolling container.
  2. For a fixed header, reserve appropriate layout space. For anchor overlap, adjust the scroll offset.
  3. Account for the different header height on mobile without introducing a large empty gap.
  4. Test direct links to anchors, ordinary scrolling, and an open mobile menu.

Before & after

ILLUSTRATIVE EXAMPLE
h2[id] { scroll-margin-top: 6rem; }

Anchor headings remain visible below the header. A fixed-header layout also keeps the first section unobscured.

MAKE IT YOURS

Use with an AI coding tool

1 Describe your change

Use your own words. You do not need a file name. The prompt asks the AI to preserve unrelated work.

We remember this choice on this device. Choosing a tool does not connect it to this website.

2 Copy your prompt

Read the complete prompt below, then copy it.

3 Paste into your AI coding tool

Open your website or app project in your AI coding tool. Paste this into its AI chat box and send it. The tool needs access to your project files to make changes.

A website address alone does not give an AI permission or access to edit it. This prompt goes into an AI chat, not a regular terminal window.

4 Check the result

Check first load, anchor navigation, expanded menus, and orientation changes.

Open your project preview and try the change. Review what changed before publishing. If it is wrong, use your tool’s undo or restore your saved project version.

If the result is not what you expected

The offset works only on desktop

Use the actual responsive header heights. A single guessed value may fail on phones.

A huge padding was added to every section

Keep layout spacing and anchor scrolling offsets separate.

Undo the change

Restore the specific spacing or scroll-offset rule. Avoid undoing unrelated navigation changes.

References & testing

The examples above explain the expected behavior; they are not a claim that this prompt has been tested in every framework or AI model. Test the proposed change in your actual project before publishing.

MDN: scroll-margin-top ↗ · Our review approach