Week 422 was posted by Charanjit Chana on 2025-11-14.
I've been thinking about a layout I want to experiment with for a hero landing page where the header / primary message is front and centre and the navigation then sticks to the top once it reaches the top. Easy enough, but I thought it would be nice to have the navigation only be as wide as the content until it becomes sticky.
Following on from last week's post on scroll driven animations, it was pretty simple to work out with no JavaScript required. The graceful fallback is to just show at the same width as the content no matter what.
As you scroll, the nav takes over the top and stretches to full width and remains sticky.
A very basic demo but it works! I ended up setting the line-height to 1 and using the known font sizes to make sure the nav appears at the bottom of the view on initial load.
Tags: