Navbar With Floating Pill

Pulls away from the top edge and floats as a rounded capsule with the page visible around it. It reads lighter than a bar that spans the full width, and it gives a tall hero back the strip of vertical space a conventional header would have taken. The gradient call to action is the anchor at its right end.

The failure case is specific and worth checking before you commit. Because the pill is narrow and blurred rather than opaque, whatever scrolls beneath it shows through, and over a photograph the contrast behind the link labels changes as the page moves. Over a flat colour or a slow gradient it holds up fine. Scroll your real hero underneath it once and you will know within seconds which situation you are in.