<nav class="glass-navbar">
<div class="nav-brand">
<svg viewBox="0 0 24 24" width="28" height="28" fill="none" stroke="#f8fafc" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path></svg>
<span>Nexus</span>
</div>
<div class="nav-links">
<a href="#" class="nav-item">Mac</a>
<a href="#" class="nav-item">iPad</a>
<a href="#" class="nav-item">iPhone</a>
<a href="#" class="nav-item">Watch</a>
<a href="#" class="nav-item">Support</a>
</div>
<div class="nav-actions">
<button class="icon-btn">
<svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
</button>
<button class="icon-btn">
<svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"></path><line x1="3" y1="6" x2="21" y2="6"></line><path d="M16 10a4 4 0 0 1-8 0"></path></svg>
</button>
</div>
</nav>
<div class="content-spacer">
<h1>Scroll Down</h1>
<p>The navigation bar remains fixed and applies a beautiful blur to the content passing underneath it.</p>
</div>
*, *::before, *::after {
box-sizing: border-box;
}
body {
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
margin: 0;
background: #0f172a;
color: #f8fafc;
min-height: 200vh;
}
.glass-navbar {
position: sticky;
top: 0;
left: 0;
width: 100%;
height: 60px;
background: rgba(15, 23, 42, 0.7);
backdrop-filter: saturate(180%) blur(20px);
-webkit-backdrop-filter: saturate(180%) blur(20px);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 40px;
z-index: 1000;
}
.nav-brand {
display: flex;
align-items: center;
gap: 10px;
font-weight: 700;
font-size: 1.25rem;
letter-spacing: -0.5px;
cursor: pointer;
}
.nav-links {
display: flex;
gap: 32px;
}
.nav-item {
color: #cbd5e1;
text-decoration: none;
font-size: 0.85rem;
font-weight: 500;
letter-spacing: 0.5px;
transition: color 0.2s ease;
}
.nav-item:hover {
color: #ffffff;
}
.nav-actions {
display: flex;
gap: 16px;
}
.icon-btn {
background: transparent;
border: none;
color: #cbd5e1;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
padding: 0;
transition: color 0.2s ease;
}
.icon-btn:hover {
color: #ffffff;
}
.content-spacer {
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 20px;
}
.content-spacer h1 {
font-size: 4rem;
margin: 0 0 10px 0;
text-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}
.content-spacer p {
font-size: 1.25rem;
color: #e2e8f0;
max-width: 500px;
}
