A sticky navigation bar built with pure HTML and CSS that remains fixed at the top of the viewport while scrolling. It enhances persistent navigation accessibility and user orientation in long page layouts.
Usage
Use this component when interfaces require always visible header navigation, such as landing pages, documentation sites, dashboards, or content heavy layouts where quick access to links improves usability.
Implementation
The sticky behavior is implemented using CSS position: sticky or fixed positioning, combined with controlled z-index and spacing adjustments. Responsive styling ensures consistent alignment across screen sizes.
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
- Built with pure HTML and CSS
- No JavaScript required
- Uses sticky or fixed positioning
- Enhances continuous navigation visibility
- Fully responsive across breakpoints
- Suitable for landing pages and dashboards
- Easy to customize background and shadow styling
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.