Add a Navigation Bar to an AI Page (That Works on Mobile Too)

TLDR: A navigation bar is the single fastest upgrade for an AI page that feels like a long scroll. Ask the AI for a sticky header with a logo, a few section links, and one clear button, and tell it to collapse into a hamburger menu on mobile. Add smooth in-page scrolling, a skip link for keyboard users, and a touch of polish on scroll. Below are copy-paste prompts and a live demo.

You prompt an AI, it builds a page, and the content is genuinely good. But it reads like a document: one long scroll, nowhere to jump, no sense of where you are. The thing missing is almost always a navigation bar. Add one and the same content suddenly reads as a real site someone built on purpose.

The good news is you do not have to hand-code it or know CSS. A navigation bar is a small, well-understood pattern, and AI builds it reliably when you describe the parts. This walks through what a good nav bar is made of, how to prompt for one, and the two things that trip people up: mobile and smooth scrolling.

Why a navigation bar matters on an AI page

A nav bar does three quiet jobs at once. It tells people what is on the page before they scroll, so they know there is a reason to stay. It gives them a way to jump straight to the part they care about instead of flicking past everything. And it gives the page an anchor point, a fixed frame that signals this is a finished site, not a draft pasted into a window.

For a long single page, a landing page, a product one-pager, a portfolio, a nav bar turns a scroll into a map. For a multi-page site, it is how people move between pages at all. Either way it is the difference between content that happens to be stacked and a site someone can actually navigate.

The anatomy of a navigation bar

Almost every good nav bar is the same three or four parts in a row. Knowing the names makes your prompt sharper.

Logo or brand name on the left, which usually links back to the top or the home page. Section links in the middle or toward the right, kept short, three to five of them, not a list of everything. One call-to-action button on the far right, visually heavier than the links so the main action stands out. And on small screens, a hamburger icon that hides the links behind a tap so nothing overflows.

Resist the urge to cram. A nav bar with nine links and three buttons is noise. Pick the few things people actually need and let the rest live in the page or a footer.

Which type of navigation should you use?

There is no single right answer, it depends on the page. Here is the honest version.

For most AI-built pages, a sticky top bar that collapses to a hamburger is the right default. It stays reachable as people scroll and it behaves on phones. The rest of this article assumes that pattern.

How to prompt AI for a navigation bar

Describe the parts and the behavior, not just the word “nav.” Here is a prompt that produces a clean, working header in one pass.

Add a navigation bar to the top of this page.

Layout:
- Logo or brand name on the left, linking to the top of the page
- These section links, in this order: Features, Pricing, FAQ, Contact
- One call-to-action button on the right that says "Get started"

Behavior:
- Make the bar sticky so it stays pinned to the top as the user scrolls
- Give the bar a solid background and a subtle bottom border so content
  does not bleed through it
- On screens narrower than 768px, hide the inline links and show a
  hamburger button that toggles a stacked menu

Style: clean and modern, matching the rest of the page. Keep the bar
slim. Put all CSS in the same file. Use plain HTML, CSS, and a small
amount of vanilla JavaScript only, no libraries.

Two details do most of the work. “Sticky” keeps the bar pinned, which is what makes it feel like a real site. “Solid background” stops the page from showing through the bar as you scroll, which is the most common ugly bug. If you ask for only those and nothing else, you already have a usable nav.

If your sections do not have ids yet, add one line: “Give each section an id so the nav links can jump to it.” The links need targets to point at.

How do you make the nav work on mobile?

This is where most AI-built nav bars fall apart. A row of five text links fits a laptop and runs straight off the edge of a phone. The fix is the hamburger: below a breakpoint, hide the inline links and reveal a button that opens a stacked menu.

The prompt line “on screens narrower than 768px, hide the inline links and show a hamburger button that toggles a stacked menu” handles it. Add this if you want it to feel considered: “When the mobile menu is open, close it when a link is tapped, and let the Escape key close it too.” That one sentence fixes the two things people notice most, a menu that stays stuck open after you pick something, and no way to dismiss it.

Always test it by narrowing your browser window until the hamburger appears, then click through. If the links overflow or the menu will not open, tell the AI exactly what you saw and it will patch it. For the broader checklist, see making AI pages mobile-friendly.

Smooth scrolling and active section highlighting

When a nav link jumps to a section, two small touches make it feel deliberate. Smooth scrolling animates the jump instead of snapping. And if the bar is sticky, you need a little offset so the section heading does not hide underneath the bar when you land.

Make the nav links scroll smoothly to their sections. Add
scroll-behavior: smooth to the page, and because the header is sticky,
add scroll-margin-top to each section equal to the header height so
headings are not hidden behind the bar. If it is not much extra code,
highlight the nav link for whichever section is currently in view.

The highlight is a nice-to-have, not a must. If you want it and you are keeping things simple, ask for it with an IntersectionObserver so it does not slow the page down. If the AI reaches for a heavy library, tell it to use plain JavaScript instead. For more on wiring up behavior like this, see how to make an AI page interactive.

Make the nav accessible

A nav bar is the first thing keyboard and screen-reader users hit, so a few basics matter. Ask for them directly:

Make the navigation accessible. Wrap it in a <nav> element with an
aria-label. Add a visible "Skip to content" link as the first focusable
element. Make sure every link and the menu button are reachable and
operable by keyboard, with a clear focus outline. The hamburger button
should have an aria-expanded attribute that reflects whether the menu
is open.

The skip link is the one people forget. It lets a keyboard user jump past the nav straight to the content instead of tabbing through every link on every page. It is a few lines and it is the mark of a page built by someone who cares. The full picture is in making AI pages accessible.

See it in action

Here is the pattern in a small frame. Scroll inside it to watch the header stay pinned, and use the menu button to toggle the mobile-style menu.

Common mistakes

A few things turn a nav from invisible to annoying. A transparent bar over scrolling content looks great for one second and becomes unreadable the moment text slides under it, so give it a solid or blurred background. Too many links makes people read instead of scan, keep it to a handful. A bar that is too tall steals screen height on phones, keep it slim. And links that jump under a sticky header feel broken, which is exactly what the scroll-margin-top line fixes.

If your page still feels generic once the nav is in, the nav is rarely the problem. See why AI pages look generic and how to fix it.

Publish it so the nav actually works for other people

Here is the part that is easy to overlook. A navigation bar is interactive. The sticky behavior, the hamburger toggle, the smooth scroll, none of it survives a screenshot or a flattened PDF. To hand someone a page where the nav genuinely works, they need the real, running page.

That is what VisiblePage is for. Paste your HTML or drop a ZIP of a multi-file project and you get a live link in seconds, with every button, menu, and scroll interaction intact, served fast from the edge. You can keep the page public, make it private, or put a password on it, point a custom domain at it, and because the link is one canonical URL, fixing the nav later updates what everyone sees without sending a new file. No build step, no hosting setup.

Try it now: Publish your AI-generated HTML with VisiblePage and get a live link in seconds.

FAQ

How do I get AI to add a navigation bar to my page?

Ask for it directly and describe the parts. Tell the AI you want a sticky header with a logo on the left, a few section links in the middle, and one call-to-action button on the right, that collapses into a hamburger menu below a mobile breakpoint. Name the sections the links should jump to. If your sections already have id attributes, point the links at those. The AI handles the HTML and CSS in one pass.

Why does my nav bar break on mobile?

Usually the links run off the edge because nothing collapses them. A row of five text links that fits a laptop will overflow a phone. The fix is a mobile menu: hide the inline links below a breakpoint and show a hamburger button that toggles a stacked menu. Ask the AI to make the nav responsive with a hamburger below 768px, and test it by narrowing your browser window.

How do I make the nav links scroll smoothly to each section?

Give each section an id, point the links at those ids with a hash, and add scroll-behavior: smooth in the CSS. If the nav is sticky, also add scroll-margin-top to the sections so headings do not hide behind the bar when a link jumps to them. One line in the prompt asking for smooth in-page scrolling with sticky-offset spacing covers it.

Does a navigation bar still work when I publish the page as a link?

Yes. A nav bar is just HTML, CSS, and sometimes a little JavaScript, so it keeps working anywhere the real page runs. When you publish with VisiblePage you share the live page, not a screenshot, so the sticky header, the mobile menu, and the smooth scrolling all behave for whoever opens the link.