🧭 Navigation Bars
8 responsive navbars — each collapses to a pure-CSS menu on phones
8 components. Pick one, check it in Preview, open Code to read it, then Copy code — you get the complete HTML and its CSS in one self-contained snippet, so it pastes in looking exactly like the preview.
HTML + CSS · self-contained32 lines
<nav class="nxn1" aria-label="Main">
<a href="#" class="nxn1-brand">Brand</a>
<input type="checkbox" id="nxn1-t" class="nxn1-t" aria-label="Open menu">
<label for="nxn1-t" class="nxn1-burger" aria-hidden="true"><span></span><span></span><span></span></label>
<div class="nxn1-menu">
<a href="#" aria-current="page">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Contact</a>
</div>
</nav>
<style>
.nxn1, .nxn1 * { box-sizing: border-box; }
.nxn1 { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 10px 20px; background: #fff; border: 1px solid #ece4d8; border-radius: 14px; font-family: system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
.nxn1-brand { color: #2a1f1a; font-weight: 800; font-size: 18px; text-decoration: none; }
.nxn1-menu { display: flex; align-items: center; gap: 4px; }
.nxn1-menu a { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 8px; color: #5e503f; font-size: 15px; text-decoration: none; }
.nxn1-menu a:hover, .nxn1-menu a[aria-current] { color: #2a1f1a; background: #f5efe6; }
.nxn1-t { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.nxn1-burger { display: none; width: 44px; height: 44px; margin-left: auto; flex-direction: column; align-items: center; justify-content: center; gap: 5px; border-radius: 10px; cursor: pointer; }
.nxn1-burger span { display: block; width: 22px; height: 2px; border-radius: 2px; background: #2a1f1a; transition: transform .2s, opacity .2s; }
.nxn1-t:focus-visible + .nxn1-burger { outline: 3px solid #e8b48a; }
.nxn1-t:checked + .nxn1-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nxn1-t:checked + .nxn1-burger span:nth-child(2) { opacity: 0; }
.nxn1-t:checked + .nxn1-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 640px) {
.nxn1 { flex-wrap: wrap; }
.nxn1-burger { display: flex; }
.nxn1-menu { display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 2px; padding-top: 8px; }
.nxn1-t:checked ~ .nxn1-menu { display: flex; }
}
</style>
HTML + CSS · self-contained36 lines
<nav class="nxn2" aria-label="Main">
<a href="#" class="nxn2-brand"><span class="nxn2-logo" aria-hidden="true"></span>Logo</a>
<input type="checkbox" id="nxn2-t" class="nxn2-t" aria-label="Open menu">
<label for="nxn2-t" class="nxn2-burger" aria-hidden="true"><span></span><span></span><span></span></label>
<div class="nxn2-menu">
<a href="#">Features</a>
<a href="#">Pricing</a>
<a href="#">Blog</a>
<a href="#" class="nxn2-cta">Sign up</a>
</div>
</nav>
<style>
.nxn2, .nxn2 * { box-sizing: border-box; }
.nxn2 { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 10px 14px 10px 20px; background: #fff; border: 1px solid #ece4d8; border-radius: 14px; font-family: system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
.nxn2-brand { display: flex; align-items: center; gap: 8px; color: #2a1f1a; font-weight: 800; font-size: 18px; text-decoration: none; }
.nxn2-logo { width: 22px; height: 22px; border-radius: 7px; background: linear-gradient(135deg, #e0603a, #a24832); }
.nxn2-menu { display: flex; align-items: center; gap: 4px; }
.nxn2-menu a { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 12px; border-radius: 8px; color: #5e503f; font-size: 15px; text-decoration: none; }
.nxn2-menu a:hover { color: #2a1f1a; }
.nxn2-menu a.nxn2-cta { margin-left: 8px; padding: 0 20px; border-radius: 999px; background: #2a1f1a; color: #faf6f0; font-weight: 600; }
.nxn2-menu a.nxn2-cta:hover { background: #a24832; }
.nxn2-t { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.nxn2-burger { display: none; width: 44px; height: 44px; margin-left: auto; flex-direction: column; align-items: center; justify-content: center; gap: 5px; border-radius: 10px; cursor: pointer; }
.nxn2-burger span { display: block; width: 22px; height: 2px; border-radius: 2px; background: #2a1f1a; transition: transform .2s, opacity .2s; }
.nxn2-t:focus-visible + .nxn2-burger { outline: 3px solid #e8b48a; }
.nxn2-t:checked + .nxn2-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nxn2-t:checked + .nxn2-burger span:nth-child(2) { opacity: 0; }
.nxn2-t:checked + .nxn2-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 640px) {
.nxn2 { flex-wrap: wrap; }
.nxn2-burger { display: flex; }
.nxn2-menu { display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 2px; padding-top: 8px; }
.nxn2-t:checked ~ .nxn2-menu { display: flex; }
}
@media (max-width: 640px) { .nxn2-menu a { justify-content: flex-start; } .nxn2-menu a.nxn2-cta { justify-content: center; margin: 6px 0 0; } }
</style>
HTML + CSS · self-contained38 lines
<nav class="nxn3" aria-label="Main">
<a href="#" class="nxn3-brand">Brand</a>
<input type="checkbox" id="nxn3-t" class="nxn3-t" aria-label="Open menu">
<label for="nxn3-t" class="nxn3-burger" aria-hidden="true"><span></span><span></span><span></span></label>
<div class="nxn3-menu">
<div class="nxn3-links">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Work</a>
<a href="#">Contact</a>
</div>
<a href="#" class="nxn3-login">Log in</a>
</div>
</nav>
<style>
.nxn3, .nxn3 * { box-sizing: border-box; }
.nxn3 { display: flex; align-items: center; gap: 16px; width: 100%; padding: 10px 20px; background: #fff; border: 1px solid #ece4d8; border-radius: 14px; font-family: system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
.nxn3-brand { flex: 1 1 0; color: #2a1f1a; font-weight: 800; font-size: 18px; text-decoration: none; }
.nxn3-menu { flex: 2 1 0; display: flex; align-items: center; }
.nxn3-links { flex: 1; display: flex; justify-content: center; gap: 4px; }
.nxn3-menu a { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 8px; color: #5e503f; font-size: 15px; text-decoration: none; }
.nxn3-menu a:hover { color: #2a1f1a; background: #f5efe6; }
.nxn3-menu a.nxn3-login { flex: 0 0 auto; color: #a24832; font-weight: 600; }
.nxn3-t { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.nxn3-burger { display: none; width: 44px; height: 44px; margin-left: auto; flex-direction: column; align-items: center; justify-content: center; gap: 5px; border-radius: 10px; cursor: pointer; }
.nxn3-burger span { display: block; width: 22px; height: 2px; border-radius: 2px; background: #2a1f1a; transition: transform .2s, opacity .2s; }
.nxn3-t:focus-visible + .nxn3-burger { outline: 3px solid #e8b48a; }
.nxn3-t:checked + .nxn3-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nxn3-t:checked + .nxn3-burger span:nth-child(2) { opacity: 0; }
.nxn3-t:checked + .nxn3-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 640px) {
.nxn3 { flex-wrap: wrap; }
.nxn3-burger { display: flex; }
.nxn3-menu { display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 2px; padding-top: 8px; }
.nxn3-t:checked ~ .nxn3-menu { display: flex; }
}
@media (max-width: 640px) { .nxn3-links { flex-direction: column; gap: 2px; } }
</style>
HTML + CSS · self-contained39 lines
<nav class="nxn4" aria-label="Main">
<a href="#" class="nxn4-brand">Brand</a>
<input type="checkbox" id="nxn4-t" class="nxn4-t" aria-label="Open menu">
<label for="nxn4-t" class="nxn4-burger" aria-hidden="true"><span></span><span></span><span></span></label>
<div class="nxn4-menu">
<a href="#">Home</a>
<a href="#">Docs</a>
<form class="nxn4-search" role="search" action="#">
<input type="search" placeholder="Search…" aria-label="Search">
</form>
<a href="#" class="nxn4-avatar" aria-label="Your profile">JD</a>
</div>
</nav>
<style>
.nxn4, .nxn4 * { box-sizing: border-box; }
.nxn4 { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 10px 14px 10px 20px; background: #fff; border: 1px solid #ece4d8; border-radius: 14px; font-family: system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
.nxn4-brand { color: #2a1f1a; font-weight: 800; font-size: 18px; text-decoration: none; }
.nxn4-menu { flex: 1; display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.nxn4-menu > a { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 8px; color: #5e503f; font-size: 15px; text-decoration: none; }
.nxn4-menu > a:hover { color: #2a1f1a; background: #f5efe6; }
.nxn4-search { flex: 0 1 220px; margin: 0 6px; }
.nxn4-search input { width: 100%; min-height: 42px; padding: 0 14px; border: 1.5px solid #e2d8ca; border-radius: 999px; background: #faf8f5; color: #2a1f1a; font: 15px system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; outline: none; }
.nxn4-search input:focus { border-color: #a24832; background: #fff; }
.nxn4-menu > a.nxn4-avatar { width: 42px; min-height: 42px; padding: 0; justify-content: center; border-radius: 50%; background: #e8ddd5; color: #5e503f; font-size: 13px; font-weight: 700; }
.nxn4-t { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.nxn4-burger { display: none; width: 44px; height: 44px; margin-left: auto; flex-direction: column; align-items: center; justify-content: center; gap: 5px; border-radius: 10px; cursor: pointer; }
.nxn4-burger span { display: block; width: 22px; height: 2px; border-radius: 2px; background: #2a1f1a; transition: transform .2s, opacity .2s; }
.nxn4-t:focus-visible + .nxn4-burger { outline: 3px solid #e8b48a; }
.nxn4-t:checked + .nxn4-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nxn4-t:checked + .nxn4-burger span:nth-child(2) { opacity: 0; }
.nxn4-t:checked + .nxn4-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 640px) {
.nxn4 { flex-wrap: wrap; }
.nxn4-burger { display: flex; }
.nxn4-menu { display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 2px; padding-top: 8px; }
.nxn4-t:checked ~ .nxn4-menu { display: flex; }
}
@media (max-width: 640px) { .nxn4-search { flex: none; margin: 6px 0; } .nxn4-menu > a.nxn4-avatar { margin-top: 4px; } }
</style>
HTML + CSS · self-contained44 lines
<header class="nxn5">
<nav class="nxn5-nav" aria-label="Main">
<a href="#" class="nxn5-brand">Brand</a>
<input type="checkbox" id="nxn5-t" class="nxn5-t" aria-label="Open menu">
<label for="nxn5-t" class="nxn5-burger" aria-hidden="true"><span></span><span></span><span></span></label>
<div class="nxn5-menu">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#" class="nxn5-on">Contact</a>
</div>
</nav>
<div class="nxn5-hero">
<h1>Over a hero image</h1>
<p>The bar sits on top of the section with no background of its own.</p>
</div>
</header>
<style>
.nxn5, .nxn5 * { box-sizing: border-box; }
.nxn5 { width: 100%; border-radius: 16px; overflow: hidden; background: radial-gradient(circle at 80% 10%, #3b4a8a, transparent 55%), linear-gradient(135deg, #1a1a2e, #16213e); color: #fff; font-family: system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
.nxn5-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 20px; border-bottom: 1px solid rgba(255,255,255,.12); }
.nxn5-brand { color: #fff; font-weight: 800; font-size: 18px; text-decoration: none; }
.nxn5-menu { display: flex; align-items: center; gap: 4px; }
.nxn5-menu a { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 8px; color: rgba(255,255,255,.75); font-size: 15px; text-decoration: none; }
.nxn5-menu a:hover, .nxn5-menu a.nxn5-on { color: #fff; }
.nxn5-menu a.nxn5-on { font-weight: 600; }
.nxn5-hero { padding: 40px 20px 48px; text-align: center; }
.nxn5-hero h1 { margin: 0 0 8px; font-size: clamp(24px, 5vw, 34px); line-height: 1.2; }
.nxn5-hero p { margin: 0 auto; max-width: 420px; color: rgba(255,255,255,.75); font-size: 15px; line-height: 1.55; }
.nxn5-t { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.nxn5-burger { display: none; width: 44px; height: 44px; margin-left: auto; flex-direction: column; align-items: center; justify-content: center; gap: 5px; border-radius: 10px; cursor: pointer; }
.nxn5-burger span { display: block; width: 22px; height: 2px; border-radius: 2px; background: #fff; transition: transform .2s, opacity .2s; }
.nxn5-t:focus-visible + .nxn5-burger { outline: 3px solid #e8b48a; }
.nxn5-t:checked + .nxn5-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nxn5-t:checked + .nxn5-burger span:nth-child(2) { opacity: 0; }
.nxn5-t:checked + .nxn5-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 640px) {
.nxn5 { flex-wrap: wrap; }
.nxn5-burger { display: flex; }
.nxn5-menu { display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 2px; padding-top: 8px; }
.nxn5-t:checked ~ .nxn5-menu { display: flex; }
}
.nxn5-nav { flex-wrap: wrap; }
</style>
HTML + CSS · self-contained36 lines
<nav class="nxn6" aria-label="Main">
<a href="#" class="nxn6-brand"><span aria-hidden="true">⚡</span> App</a>
<input type="checkbox" id="nxn6-t" class="nxn6-t" aria-label="Open menu">
<label for="nxn6-t" class="nxn6-burger" aria-hidden="true"><span></span><span></span><span></span></label>
<div class="nxn6-menu">
<a href="#" aria-current="page">Dashboard</a>
<a href="#">Projects</a>
<a href="#">Team</a>
<a href="#" class="nxn6-user"><span class="nxn6-name">John</span><span class="nxn6-av" aria-hidden="true">J</span></a>
</div>
</nav>
<style>
.nxn6, .nxn6 * { box-sizing: border-box; }
.nxn6 { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 10px 14px 10px 20px; background: #17140f; border-radius: 14px; font-family: system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
.nxn6-brand { color: #fff; font-weight: 800; font-size: 18px; text-decoration: none; }
.nxn6-menu { display: flex; align-items: center; gap: 4px; }
.nxn6-menu a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border-radius: 8px; color: #b9b1a6; font-size: 15px; text-decoration: none; }
.nxn6-menu a:hover { color: #fff; background: rgba(255,255,255,.06); }
.nxn6-menu a[aria-current] { color: #fff; background: rgba(255,255,255,.1); }
.nxn6-menu a.nxn6-user { margin-left: 8px; color: #e4ddd3; }
.nxn6-av { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #c0785a; color: #fff; font-size: 13px; font-weight: 700; }
.nxn6-t { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.nxn6-burger { display: none; width: 44px; height: 44px; margin-left: auto; flex-direction: column; align-items: center; justify-content: center; gap: 5px; border-radius: 10px; cursor: pointer; }
.nxn6-burger span { display: block; width: 22px; height: 2px; border-radius: 2px; background: #fff; transition: transform .2s, opacity .2s; }
.nxn6-t:focus-visible + .nxn6-burger { outline: 3px solid #e8b48a; }
.nxn6-t:checked + .nxn6-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nxn6-t:checked + .nxn6-burger span:nth-child(2) { opacity: 0; }
.nxn6-t:checked + .nxn6-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 640px) {
.nxn6 { flex-wrap: wrap; }
.nxn6-burger { display: flex; }
.nxn6-menu { display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 2px; padding-top: 8px; }
.nxn6-t:checked ~ .nxn6-menu { display: flex; }
}
@media (max-width: 640px) { .nxn6-menu a.nxn6-user { margin-left: 0; } }
</style>
HTML + CSS · self-contained42 lines
<nav class="nxn7" aria-label="Main">
<a href="#" class="nxn7-brand">Brand</a>
<input type="checkbox" id="nxn7-t" class="nxn7-t" aria-label="Open menu">
<label for="nxn7-t" class="nxn7-burger" aria-hidden="true"><span></span><span></span><span></span></label>
<div class="nxn7-menu">
<div class="nxn7-pills">
<a href="#" aria-current="page">Home</a>
<a href="#">About</a>
<a href="#">Work</a>
<a href="#">Blog</a>
</div>
<a href="#" class="nxn7-login">Log in <span aria-hidden="true">→</span></a>
</div>
</nav>
<style>
.nxn7, .nxn7 * { box-sizing: border-box; }
.nxn7 { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 8px 14px 8px 20px; background: #fff; border: 1px solid #ece4d8; border-radius: 999px; font-family: system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
.nxn7-brand { color: #2a1f1a; font-weight: 800; font-size: 18px; text-decoration: none; }
.nxn7-menu { display: flex; align-items: center; gap: 12px; }
.nxn7-pills { display: flex; gap: 4px; padding: 3px; border-radius: 999px; background: #f5efe6; }
.nxn7-menu a { display: flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; color: #5e503f; font-size: 14.5px; text-decoration: none; }
.nxn7-pills a:hover { color: #2a1f1a; }
.nxn7-pills a[aria-current] { background: #2a1f1a; color: #faf6f0; font-weight: 600; }
.nxn7-menu a.nxn7-login { color: #a24832; font-weight: 600; }
.nxn7-t { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.nxn7-burger { display: none; width: 44px; height: 44px; margin-left: auto; flex-direction: column; align-items: center; justify-content: center; gap: 5px; border-radius: 10px; cursor: pointer; }
.nxn7-burger span { display: block; width: 22px; height: 2px; border-radius: 2px; background: #2a1f1a; transition: transform .2s, opacity .2s; }
.nxn7-t:focus-visible + .nxn7-burger { outline: 3px solid #e8b48a; }
.nxn7-t:checked + .nxn7-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nxn7-t:checked + .nxn7-burger span:nth-child(2) { opacity: 0; }
.nxn7-t:checked + .nxn7-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 640px) {
.nxn7 { flex-wrap: wrap; }
.nxn7-burger { display: flex; }
.nxn7-menu { display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 2px; padding-top: 8px; }
.nxn7-t:checked ~ .nxn7-menu { display: flex; }
}
@media (max-width: 640px) {
.nxn7 { border-radius: 18px; }
.nxn7-pills { flex-direction: column; border-radius: 14px; }
}
</style>
HTML + CSS · self-contained37 lines
<nav class="nxn8" aria-label="Main">
<a href="#" class="nxn8-brand">Studio</a>
<input type="checkbox" id="nxn8-t" class="nxn8-t" aria-label="Open menu">
<label for="nxn8-t" class="nxn8-burger" aria-hidden="true"><span></span><span></span><span></span></label>
<div class="nxn8-menu">
<a href="#">Work</a>
<a href="#">About</a>
<a href="#">Journal</a>
<span class="nxn8-dots" aria-hidden="true"><i></i><i></i><i></i></span>
</div>
</nav>
<style>
.nxn8, .nxn8 * { box-sizing: border-box; }
.nxn8 { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 8px 20px; background: #fff; border: 2px solid #2a1f1a; border-radius: 4px; font-family: system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
.nxn8-brand { color: #2a1f1a; font-weight: 900; font-size: 18px; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; }
.nxn8-menu { display: flex; align-items: center; gap: 4px; }
.nxn8-menu a { display: flex; align-items: center; min-height: 44px; padding: 0 12px; color: #2a1f1a; font-size: 13.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; border-bottom: 2px solid transparent; }
.nxn8-menu a:hover { border-bottom-color: #a24832; }
.nxn8-dots { display: flex; gap: 6px; margin-left: 12px; }
.nxn8-dots i { width: 9px; height: 9px; border-radius: 50%; background: #c0785a; }
.nxn8-dots i:nth-child(2) { background: #2a1f1a; }
.nxn8-dots i:nth-child(3) { background: #d4a574; }
.nxn8-t { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.nxn8-burger { display: none; width: 44px; height: 44px; margin-left: auto; flex-direction: column; align-items: center; justify-content: center; gap: 5px; border-radius: 10px; cursor: pointer; }
.nxn8-burger span { display: block; width: 22px; height: 2px; border-radius: 2px; background: #2a1f1a; transition: transform .2s, opacity .2s; }
.nxn8-t:focus-visible + .nxn8-burger { outline: 3px solid #e8b48a; }
.nxn8-t:checked + .nxn8-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nxn8-t:checked + .nxn8-burger span:nth-child(2) { opacity: 0; }
.nxn8-t:checked + .nxn8-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 640px) {
.nxn8 { flex-wrap: wrap; }
.nxn8-burger { display: flex; }
.nxn8-menu { display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 2px; padding-top: 8px; }
.nxn8-t:checked ~ .nxn8-menu { display: flex; }
}
@media (max-width: 640px) { .nxn8-dots { margin: 10px 12px 6px; } }
</style>
Class names carry a unique prefix, so several snippets can sit on one page without clashing. Colours and fonts are plain CSS values — change them to match your brand.
What Is This?
- Collection of responsive navigation bar designs
- Includes horizontal, sticky, transparent, and hamburger menus
- Pure HTML and CSS — no JavaScript dependencies
- Copy and customize for any web project
- Mobile-responsive with built-in breakpoints
How to Use
- Browse the navbar design gallery
- Preview each navbar with responsive behavior
- Copy the complete HTML/CSS code
- Customize links, colors, and logo placement
- Test responsive behavior for mobile views
Use Cases
- Adding professional navigation to websites
- Finding responsive navbar patterns for new projects
- Learning CSS techniques for sticky and transparent headers
- Prototyping website headers quickly
- Building mobile-friendly hamburger menu navigation