A centered navigation bar built with pure HTML and CSS that aligns menu items symmetrically within the header layout. It enhances visual balance and structured alignment clarity in responsive interfaces.
Usage
Use this component when layouts require balanced horizontal navigation, such as portfolio websites, landing pages, marketing sites, or minimal web applications where symmetry improves aesthetics.
Implementation
The layout uses flexbox based horizontal centering techniques to position navigation items evenly within the container. CSS controls spacing, hover states, and responsive stacking for smaller screens.
HTML
<nav class="ss-nav center-nav">
<a href="#">Home</a>
<a href="#">Work</a>
<a href="#">Contact</a>
</nav>CSS
.center-nav{
display:flex;
justify-content:center;
align-items:center;
gap:16px;
padding:12px 16px;
max-width:420px;
margin:auto;
border-radius:14px;
background:var(--nav-bg);
border:1px solid var(--nav-border);
}
.center-nav a{
text-decoration:none;
font-size:13px;
padding:6px 10px;
border-radius:8px;
color:var(--nav-text);
transition:background .2s ease;
}
.center-nav a:hover{
background:var(--nav-hover-bg);
}
:root{
--nav-bg:#f1f5f9;
--nav-border:#e5e7eb;
--nav-text:#0f172a;
--nav-hover-bg:#e2e8f0;
}
@media (prefers-color-scheme: dark){
:root{
--nav-bg:#020617;
--nav-border:#1f2937;
--nav-text:#e5e7eb;
--nav-hover-bg:#1f2937;
}
}
Notes
- Built with pure HTML and CSS
- No JavaScript required
- Uses centered horizontal alignment
- Enhances layout symmetry and clarity
- Fully responsive across breakpoints
- Suitable for landing pages and portfolios
- Easy to customize spacing and typography
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.