Sticky Header

What it does

This sticky header keeps your menu and your main call to action (the one thing you most want visitors to do, like sign up or buy) within reach, however far down they go. It's called sticky because it stays stuck to the top of the screen while they scroll.

Your visitors can use it to jump to any page, follow you on social media or click your main button without scrolling back up.

Like our own header in the preview, yours can show:

• your logo, your site's name, or both
• links to your own site's main pages, with the current page highlighted
• your social icons
• a main button with your own text and link
• a menu button for phones (iPhone or Android), because your links won't all fit across a small screen

Test the preview above and customize it with your own settings. Then copy the prompt (the instructions you give your AI) with the copy button and paste it in your AI (Claude, ChatGPT, Grok, whatever you use). It builds the header in your site's colors and fonts with the settings you chose.

How it works

1. 01

   The visitor lands on your page and sees your header across the top, with your logo on the left and your main button on the right.

2. 02

   The link to the page they're on is highlighted, so they always know where they are on your site.

3. 03

   They scroll down the page, and the header stays at the top, slides away until they scroll back up, or shrinks into a slimmer bar, the way you set it.

4. 04

   They click a link or your main button from anywhere on the page and go straight where they want.

5. 05

   They click a social icon and your profile opens in a new tab, so they can follow you without leaving your site.

6. 06

   On a phone, they can tap the menu button (the three little lines) to see links to your pages, plus your main button and your social icons.

7. 07

   They tap a link to open that page, or tap the cross to close the menu and get back to the page right where they left it.

What you can customize

• Sticky behavior: choose if the header always stays visible, hides when visitors scroll down to free up the screen for reading and comes back when they scroll up, or shrinks as they scroll so it takes less room. By default it always stays visible, so your menu never leaves the screen.
• Background: keep it solid, or make it transparent over your hero image (the big picture at the top of a page) so the image fills the whole top of the screen, then solid after a short scroll so your links stay easy to read over your content. We made it solid by default.
• Brand: you can show your logo, your site's name, or both side by side, and either way your visitors always have a link to your home page, the way most people expect a logo to work. We show the logo by default.
• Social icons: you get to decide if your social icons show at the right end of the header. And on phones, they move inside the menu. They're on by default.
• Main button: by default we put one main button at the right end, but you can also go without one. On phones, it moves into the menu as a wide button, so it immediately catches their attention.
• Button text: write your button's words, like "Try the extension" in the preview. Or leave it empty and your AI will use your main call to action, or ask you if it isn't sure.
• Button link: add the page your button opens, like your sign-up page. Or leave it empty and your AI will pick the page of that call to action, or ask you where it should go.
• Phone menu: pick how the menu opens on phones, as a drop-down panel, a full screen menu, or a side menu sliding in from the right. We put the drop-down by default.

Note that our prompt will tell your AI to take your links from your own site's pages and never link to a page that doesn't exist. If you have no menu yet, it will pick your 4 or 5 most important pages and show you the list before building.

It will also add an icon only for the social profiles you really have, and ask you for any profile link it can't find on your site.

The header stays sticky on phones too, with the menu open or closed.

If your menu needs more room on phones, for account links, badges or a language switcher, we recommend you use a slide-in side menu instead.

On phones, you can also keep your 3 or 4 key pages one tap away at the bottom of the screen with an app-style bottom navigation bar.