IndieWeb Challenge Day 7

A sticky navigation menu

For ages, I have wanted the navigation menu at the top of the page to remain visible even after you have scrolled down past the bottom of the screen, which pushes the menu up off the top of the screen. In principle, that's supposed to be much easier now that you can use CSS to position an element as <sticky>. But it proved trickier than I expected

I've done it, as you can see, but had to sacrifice the image of umbrella pines that used to grace the top of each page. I just could not figure out how to get the navigation menu to stick to the top of the page while allowing the image to slide on up. I got to the point of realising that it depends on which element is inside what, but after a couple of hours of experimentation, I was not able to make it behave as I wanted.

So I have a sticky menu, but I don't have a picture, and while I warm to the greater minimalism -- the image serves no purpose other than decoration -- I quite liked the look of it before, as a reflection of my environment.

Adding it back can be a project for another, less busy day.

Two ways to respond: webmentions and comments


Webmentions allow conversations across the web, based on a web standard. They are a powerful building block for the decentralized social web.

“Ordinary” comments

These are not webmentions, but ordinary old-fashioned comments left by using the form below.

Reactions from around the web