This sticky navigation bar stays fixed at the top while scrolling, improving accessibility and navigation.
HTML
<nav class="ss-nav sticky-nav">
<a href="#">Home</a>
<a href="#">Docs</a>
<a href="#">Blog</a>
</nav>CSS
.sticky-nav{
position:sticky;
top:0;
z-index:10;
display:flex;
gap:16px;
align-items:center;
padding:10px 16px;
max-width:520px;
margin:auto;
border-radius:14px;
background:var(--nav-bg);
border:1px solid var(--nav-border);
box-shadow:0 4px 10px var(--nav-shadow);
}
.sticky-nav a{
text-decoration:none;
font-size:13px;
color:var(--nav-text);
}
:root{
--nav-bg:#ffffff;
--nav-border:#e5e7eb;
--nav-text:#0f172a;
--nav-shadow:rgba(0,0,0,.08);
}
@media (prefers-color-scheme: dark){
:root{
--nav-bg:#020617;
--nav-border:#1f2937;
--nav-text:#e5e7eb;
--nav-shadow:rgba(0,0,0,.6);
}
}
Notes
- Sticky behavior
- Improves UX
- Scroll-friendly
Preview styles shown. Production customization recommended.
Browse More UI Components
Explore hundreds of reusable HTML & CSS UI components built for modern web projects.
Discover buttons, cards, loaders, animations, layouts, and more all with live previews and clean, copy-paste code.