How to Make a Navigation Bar Stay Fixed at Top with CSS Sticky

A navigation bar that stays visible while you scroll makes a website feel faster and easier to use. Visitors can jump to another section or page at any moment without scrolling all the way back to the top. Many beginners try to build this with complicated scripts, but CSS gives you a simple built-in way to do it.

The position: sticky property lets an element scroll normally until it reaches a set point, then stick in place like it is glued to the screen. It is perfect for navigation bars and section headings. This guide shows you the exact steps, the one rule everyone forgets, and how to fix the common problems that stop sticky from working.

Quick Answer

To make a navigation bar stay at the top with sticky positioning, add position: sticky; and top: 0; to the navbar CSS, and give it a background color and a z-index so content does not show through or slide over it. The bar will scroll with the page until it touches the top of the screen, then stay fixed there while the rest of the page scrolls underneath.

How Position Sticky Actually Works

Sticky positioning is a mix of two behaviors. At first, the element behaves like a normal relative element and moves with the page as you scroll. When the element reaches the distance you set, for example the very top of the viewport, it switches behavior and stays stuck at that spot. When you scroll back up, it returns naturally with the page flow.

The crucial detail is that a sticky element can only stick inside its parent container. If the navbar’s parent is only as tall as the navbar itself, there is no room to travel, so the bar can never stick. This single rule explains most sticky failures. For a site-wide navbar, the parent effectively needs to be the full page body or a tall wrapper, giving the bar the whole page height to stick within.

Sticky is often confused with position: fixed. A fixed element is removed from the page flow completely and stays in the same screen position at all times, which means other content can hide underneath it unless you add compensating padding. A sticky element stays in the flow until it sticks, so it does not overlap content at the top of the page and needs no such compensation. For most navigation bars, sticky is the cleaner choice.

Step-by-Step: Build a Sticky Navigation Bar

This example builds a simple top navigation bar with a logo on the left and links on the right. You can adapt the colors and links to any project.

1. Create the HTML for the bar. Use a semantic nav element containing your logo text and a list of links, and place it at the top of the page body.
2. Style the bar layout. Add display: flex;, justify-content: space-between; and align-items: center; so the logo and links sit neatly on one line with spacing between them.
3. Make it sticky. Add position: sticky; and top: 0; to the nav rule. The top: 0; part is mandatory — without a threshold value, sticky never activates.
4. Add a solid background. Give the bar a background color such as background: #111827;. Without one, page text will show through the bar as content scrolls beneath it.
5. Set a z-index. Add z-index: 1000; so the bar stays visually above images and other elements that scroll under it.
6. Add padding and link styling. Use padding such as padding: 14px 24px; for a comfortable height, remove list bullets, and style the links with color and spacing that fit your design.
7. Test by scrolling. Make sure the page has enough content to scroll. The bar should reach the top and remain visible while the content moves below it.

Here is the core CSS in one place:

nav { position: sticky; top: 0; z-index: 1000; background: #111827; display: flex; justify-content: space-between; align-items: center; padding: 14px 24px; }

With only this rule, your navigation will behave like the professional sticky headers you see on news and shop websites. Everything else is decoration.

Adding a Small Gap or Offset

The top value does not have to be zero. If you want the bar to stop slightly below the top edge, use a value such as top: 10px; for a floating effect with rounded corners. The same idea is useful for sticky sidebars and sticky table headings, where you set the offset to match the height of the already-stuck navbar so elements do not overlap each other.

Sticky also matters for in-page anchor links. When a sticky bar covers the top of the screen, jumping to a section can hide its heading under the bar. Adding scroll-margin-top to your sections, set a little above the bar height, fixes that neatly.

Why Your Sticky Navbar Is Not Working

If you added the code and the bar still scrolls away, check these causes in order. One of them is responsible in nearly every case.

1. You forgot the top value. position: sticky; alone does nothing. It must be paired with top: 0; or another threshold.
2. A parent has overflow set. If any ancestor element has overflow: hidden;, overflow: auto; or overflow: scroll;, sticky positioning inside it usually breaks. Remove or rethink that overflow rule.
3. The parent is too short. A sticky element cannot travel beyond its parent. If the navbar is wrapped in a short header container, the bar stops sticking when that container ends. Move the nav so its parent spans the page height.
4. The element is inside a flex or grid item that shrinks. Some parent layouts limit the child’s height. Setting the parent item to stretch, for example with an alignment fix, can restore the room sticky needs.
5. You used sticky on the wrong element. Apply the rule to the navbar element itself, not to a child link list or an outer element with no room to move.

For the exact specification behavior and browser notes, the MDN reference for the CSS position property explains sticky alongside the other positioning values. Our broader CSS position properties complete guide compares relative, absolute, fixed and sticky side by side with more examples. The web.dev positioning course chapter is another trusted walkthrough if you want extra practice exercises.

Sticky vs Fixed: Which Should You Choose?

Choose sticky when the bar starts at the top of the page as part of the normal flow and should simply stay there once reached. This covers most website headers and avoids layout jumps. Choose fixed when the element must stay in the exact same screen position from the very first moment, regardless of where it sits in the document, such as a floating action button or a bar that appears over a full-screen hero.

Remember the trade-off with fixed: because it leaves the flow, the content beneath it moves up and can hide under the bar. You then need top padding on the body equal to the bar height. Sticky avoids that extra work entirely, which is why it is the recommended default for navigation.

Common Mistakes and Helpful Tips

The most common mistake is leaving the background transparent. The bar technically sticks, but text and images scrolling beneath it make it unreadable and untidy. Always pair a sticky navbar with a solid background color or a well-tested semi-transparent background with a blur effect, plus a subtle shadow to separate it from the content.

Another frequent mistake is forgetting mobile behavior. A sticky bar with many links can crowd a small screen or take up too much vertical space. Keep the mobile bar compact, reduce padding on small screens with a media query, and consider showing fewer links or a simple menu button. Also check that the sticky bar does not cover important content on short landscape screens.

A useful tip is to add a light shadow to the bar. Keep it simple at first: a correct sticky bar with a clean background and readable links already looks professional.

Finally, test your sticky bar on a page with images, headings and long content, not on an almost empty test page. Sticky problems involving overflow, short parents and overlap only reveal themselves with realistic content height and mixed elements.

Conclusion

A sticky navigation bar needs just two essential declarations — position: sticky; and top: 0; — supported by a solid background and a sensible z-index. When it fails, the cause is almost always a missing threshold, an overflow rule on a parent, or a parent that is too short. Build it with the steps above, test it with real scrolling content, and your visitors will always have your navigation within easy reach.

Frequently Asked Questions

Why does position sticky not work even though I added it?

The most likely reasons are a missing top value, an overflow rule on a parent element, or a parent container that is too short for the element to travel in. Check those three first and it will usually start working.

What is the difference between sticky and fixed positioning?

A sticky element stays in the normal flow and only sticks after scrolling reaches it, inside its parent. A fixed element leaves the flow completely and stays in the same screen position at all times, often requiring extra padding so it does not cover content.

Can I make a sidebar sticky with the same method?

Yes. Apply position: sticky; with a top offset to the sidebar, and make sure its parent column is tall enough. This is a popular way to keep filters, menus or adverts visible while the main content scrolls.

Does position sticky work on mobile browsers?

Yes, all modern mobile browsers support sticky positioning well. Keep the bar compact on small screens so it does not take too much vertical space, and test the result on a real phone or responsive view.

How do I stop anchor links from hiding under my sticky bar?

Add scroll-margin-top to the sections your links jump to, set slightly higher than the bar height. The browser then stops scrolling that much earlier, leaving the section heading fully visible below the bar.