This Blog's Header and Footer Stopped Being Pills and Became Bars
Refactoring the navbar and footer from a max-w-6xl pill into full-bleed bars: max-width moves up one level while content stays mx-auto max-w-6xl.
TL;DR
The blog's pill-shaped header and footer became full-bleed bars with semi-transparent backgrounds and backdrop blur. The trick: the outer element spans the whole viewport while inner content stays wrapped in mx-auto max-w-6xl for readability. A permanent border slot that transitions from border-transparent to visible on scroll prevents any layout shift.
For over two years this blog had a pill-shaped header and footer: fully rounded, capped at max-w-6xl, floating above the page background like a capsule stuck at both ends. Today I opened the local site after the refactor and both had become bars flush from the left edge to the right edge of the viewport. Thin line, semi-transparent background, a soft blur behind them. The difference hits within the first second of page load.
My first guess went the wrong way. I assumed a full-bleed bar meant throwing max-w-6xl away, letting every piece of inner content stretch, and the footer text turning into one long line that hurts to read on wide monitors. Good thing I did not execute right away. In reality the max-width just moves up one level: the outermost element takes the full width, the content inside stays wrapped in mx-auto max-w-6xl. The bar is full-bleed; its contents are not.
It turns out many modern sites use this exact pattern. The backdrop hugs the edges, the content aligns with the article column. One element for the backdrop, one for the content.
Navbar yang dipasang nempel di viewport
The new Navbar structure looks like this. The outermost element uses position fixed with inset-x-0, top-0, plus z-50, and the horizontal and top padding from the pill version is gone. inset-x-0 sets both left and right offsets to zero, so the element stretches across the entire viewport width, edge to edge [2]
. And because its position is fixed, the element leaves the normal flow and is positioned relative to the viewport, not its parent [3]
. That is why it can break out of any container above it.
The small trick I like most lives in the scroll behavior. The inner bar always has a border slot at the bottom; only its state changes: border-transparent while the page sits at the top, then transitioning to border-border/60 with backdrop-blur-2xl as soon as the user scrolls. The slot never disappears, so there is zero layout shift at the moment of transition. Any movement in a navbar reads as a "jump" to users, so this is not a detail to dismiss.
The key is the semi-transparent background, bg-background/70. MDN explains that backdrop-filter blurs everything behind the element, and the effect only shows if the element itself is not solid [4]
. With a solid background the blur does nothing.
Footer dan menu mobile ikutan melebar
The footer is less involved than the navbar because it is not fixed. It just gets a semi-transparent top line and backdrop-blur-xl, with a bg-card/30 background as a subtle separation from the article area. The visual effect is noticeable: the page-closing line now spans fully from left to right, so the end of the page feels properly closed instead of stopping abruptly mid-page.
The mobile menu gets the impact for free. Since its parent already spans the viewport, the menu dropdown is automatically full width; it just needed a border-b to separate it from the article content below. No extra hacks.
Max-width yang cuma pindah tempat, bukan dihapus
max-w-6xl equals 72rem, or 1152px [1]
. Drop that number from the content and article paragraphs would stretch well past 1152px on wide monitors, producing line lengths the eye struggles to follow. So max-width stays in play; its responsibility just moves from the outer pill element to the content container inside the bar.
One thing that confused me midway: Tailwind's container does not center itself; it needs mx-auto explicitly [1]
. The first time I moved max-width inward, the content hugged the left edge and I briefly blamed a breakpoint. Not a bug; that is simply how it behaves out of the box.
The final decision is simple: the full-bleed outer bar owns the backdrop, the inner container keeps mx-auto max-w-6xl for readability, and backdrop blur goes on both header and footer for consistency. No class was removed outright; everything just moved to a place that makes more sense.