How do I make the navbar stick to the top of the page?

Enable the Sticky toggle — it adds `position: sticky; top: 0; z-index: 50;` to the .navbar rule. Unlike position: fixed, sticky keeps the navbar in the normal document flow until the page scrolls past it, so you don't need to add extra top padding to the content below.

What's the difference between the left, center, and split alignments?

Left groups the brand and links together at the start of the bar. Center centers the whole group horizontally. Split pushes the brand to the far left and the links to the far right using `justify-content: space-between` — the most common pattern for a logo-plus-menu navbar.

Will this navbar work on mobile?

The generated CSS lays out links with flexbox, which will wrap or overflow on very small screens. For a full mobile menu, pair this navbar with our CSS Hamburger Menu Generator and toggle the .links list's visibility with a media query and a small script.

Why is the shadow only applied when scrolling?

It isn't — the Shadow toggle applies a constant `box-shadow` to the navbar regardless of scroll position, which reads well combined with Sticky since the shadow visually separates the bar from content underneath it as the page scrolls.

Does this tool send my design anywhere?

No — everything runs locally in your browser. The CSS is generated in real time and nothing is uploaded to a server.

CSS NAVBAR GENERATOR

Build a responsive navigation bar, then copy the CSS and matching HTML.

Brand

Home About Pricing Contact

Height: 64px

Corner radius: 0px

Background

Text color

Hover accent

StickyShadow

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  height: 64px;
  padding: 0 24px;
  background: #201d19;
  border-radius: 0px;
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.navbar .brand {
  font-size: 20px;
  font-weight: 700;
  color: #f2e9dc;
}

.navbar .links {
  display: flex;
  gap: 24px;
  list-style: none;
}

.navbar .links a {
  color: #f2e9dc;
  text-decoration: none;
  transition: color 0.15s ease;
}

.navbar .links a:hover {
  color: #ff6a35;
}

How to build a CSS navbar

1
Choose a link alignment: left, center, or split (logo left, links right).
2
Set the navbar height and corner radius.
3
Pick the background, text, and hover-accent colors.
4
Toggle sticky positioning and shadow, then copy the generated CSS and HTML.

Questions

How do I make the navbar stick to the top of the page?: Enable the Sticky toggle — it adds `position: sticky; top: 0; z-index: 50;` to the .navbar rule. Unlike position: fixed, sticky keeps the navbar in the normal document flow until the page scrolls past it, so you don't need to add extra top padding to the content below.
What's the difference between the left, center, and split alignments?: Left groups the brand and links together at the start of the bar. Center centers the whole group horizontally. Split pushes the brand to the far left and the links to the far right using `justify-content: space-between` — the most common pattern for a logo-plus-menu navbar.
Will this navbar work on mobile?: The generated CSS lays out links with flexbox, which will wrap or overflow on very small screens. For a full mobile menu, pair this navbar with our CSS Hamburger Menu Generator and toggle the .links list's visibility with a media query and a small script.
Why is the shadow only applied when scrolling?: It isn't — the Shadow toggle applies a constant `box-shadow` to the navbar regardless of scroll position, which reads well combined with Sticky since the shadow visually separates the bar from content underneath it as the page scrolls.
Does this tool send my design anywhere?: No — everything runs locally in your browser. The CSS is generated in real time and nothing is uploaded to a server.