Developer Tools New Tool

Free Online CSS Navbar Generator with Sticky Option

Build a horizontal navigation bar and see it in a strip that actually scrolls. Set the height, padding, background and border, make it sticky with a shadow that appears on scroll, place the links right or centred, choose an underline or pill indicator, and add a call to action button.

Free Forever Nothing Uploaded Sticky and scroll shadow Runs in your browser

Free Online CSS Navbar Generator with Sticky Option

Advertisement Slot (Top Banner) Google AdSense Unit • Responsive Banner

CSS Navbar Generator Everything happens in this tab. Nothing you paste is sent anywhere.

Preview

Scroll this strip. If the bar is set to sticky it stays at the top of the strip and the shadow appears once you have moved a few pixels.

The shadow is a class that script adds, because CSS on its own cannot tell whether the page has been scrolled. The few lines needed are in the output.

The links are real anchors, so hover them and press Tab to reach them. The first one carries the active class.

Everything below is here only to give the strip something to scroll.

A sticky bar costs you its full height on every screen, which matters most on a phone held in one hand.

Keep scrolling.

Almost there.

End of the strip.

CSS

Bar Class name Height px Side padding px Position Scroll shadow 18px

Colours Background Link Hover and active Accent Bottom border px

Links Placement Gap px Link size px Indicator Brand size px

Call to action Label Background Text Radius px Brand

Buy Us A Coffee

Enjoying WizTools123? Help keep our server infrastructure 100% free and open for everyone.

Buy Us A Coffee

Sponsored Content (Below Tool) Google AdSense Placement

How to Build a CSS Navigation Bar

A few steps, and nothing is uploaded.

Set the bar itself Height, side padding, background and an optional bottom border. Choose static or sticky, and set how strong the scroll shadow should be. The preview strip scrolls on its own, so a sticky bar behaves in it exactly as it will on a page.

Place the links Brand on the left, then the links either pushed to the right or centred in the space left over. Set the gap between them, the link size and whether the current page is marked with an underline, a pill or colour alone.

Add the button A single call to action at the end of the bar with its own background, text colour and radius. It is an anchor in the generated markup because it usually goes somewhere; change it to a button if it triggers an action instead.

Copy the CSS and the markup The output is the full rule set with the HTML it expects as a comment at the top, including the active class on the current link and the small scroll listener that adds the shadow class.

What to Know About Navigation Bars

Including why sticky quietly stops working.

A sticky bar costs its full height on every screen. Sixty four pixels is nothing on a desktop monitor and a real bite out of a phone held in one hand, where the browser chrome has already taken a slice. If the bar must stay, consider a shorter height under a media query, or hiding it while the reader scrolls down and bringing it back when they scroll up. Do not stack a sticky bar on top of a sticky sub navigation and a cookie notice, because between them there is no page left.

position: sticky fails if any ancestor has overflow hidden. This is the usual reason a sticky bar does nothing: the element sticks within its nearest scrolling ancestor, and an overflow: hidden, auto or scroll anywhere up the chain becomes that ancestor, so the bar sticks inside a box you cannot see instead of to the viewport. Walk up the parents and check. The other requirement is easy to miss too: sticky needs an offset, so top: 0 has to be there or nothing happens at all.

The scroll shadow needs a few lines of JavaScript. CSS cannot ask whether the page has been scrolled, so the shadow is written as a separate rule on an is-stuck class and something has to add that class. The output includes a scroll listener that does it, and mentions the alternative, which is an IntersectionObserver on a one pixel sentinel above the bar. Both are small. The preview here uses the listener on the scrolling strip.

This page writes the desktop bar and nothing else. There is no mobile menu, no hamburger, no dropdown, no mega menu, no search field, no logo image slot and no multi row layout. There is no media query in the output either, so on a narrow screen the links will crowd the brand. Pair it with the hamburger menu generator for the button and the dropdown generator for submenus, and add your own breakpoint for where the links should collapse.

Key Features & Capabilities

What this tool does, and what it deliberately does not.

A real bar Real anchors in a strip that scrolls, so sticky is genuine.

Sticky with a shadow A separate is-stuck rule, with the listener that adds it.

Two indicators An underline or a pill for the current page, or colour alone.

Right or centred Links pushed to the end of the bar, or centred in the space.

CSS and HTML The full rule set plus the markup it expects as a comment.

Runs in your browser Nothing is sent anywhere. The page works with the network off.

About the CSS Navbar Generator

A navigation bar is a flexbox row, a handful of link states and one decision about whether it follows the reader down the page. None of that is difficult, and all of it is fiddly enough that people reach for a framework and inherit a hundred rules to override. This page writes the twenty or so rules the bar actually needs, with your own class name, so the result is something you can read and edit rather than fight.

The preview is a real bar inside a strip that scrolls on its own. That matters for sticky: a static picture of a bar tells you nothing about whether it will stay put, whereas scrolling the strip shows the bar hold its position and the shadow appear. The generated CSS is applied through a stylesheet in the page, so hover states, the focus ring and the indicator are the real rules running, not an imitation of them.

Two parts are honest about needing help from elsewhere. The scroll shadow cannot be done in CSS alone, because CSS has no way to ask how far the page has been scrolled, so the tool writes the rule and hands you the four line listener that toggles the class. And there is no mobile behaviour here at all: a real header on a phone needs a toggle button and a panel, which is a different control with its own accessibility requirements.

Frequently Asked Questions

Sticky position, the scroll shadow, centring and small screens.

Almost always because an ancestor has overflow hidden, auto or scroll, which makes that element the scrolling container the bar sticks inside. Walk up the parents and remove it, or move the bar out of that subtree. The other common cause is a missing offset: position sticky does nothing without a top value, so top: 0 has to be in the rule.

The centred option here gives the link list the remaining space and centres within it, which looks centred when the brand and the button are similar widths and drifts when they are not. For true centring relative to the bar, use a three column grid with equal side tracks, for example grid-template-columns: 1fr auto 1fr, and let the middle column hold the links. That is a small edit to the generated rule.

Not reliably today. The usual trick is an IntersectionObserver watching a one pixel sentinel placed above the bar, which is still JavaScript but avoids running code on every scroll event. Scroll driven animations can fake a similar effect in browsers that support them, but support is not yet broad enough to depend on for something this visible.

Yes. Colour alone is not enough for anyone who cannot distinguish the two shades, which is why the underline and pill options exist. It is also worth adding aria-current="page" to the current link, which is what tells a screen reader where it is; the class only changes the appearance. Both are in the generated markup comment.

This tool does not handle it, and pretending otherwise would be unhelpful. A phone header usually keeps the brand and the button, hides the link list behind a toggle, and reveals it as a panel. You will need a hamburger button with aria-expanded, a panel with your own rules, and a media query deciding where the switch happens.