About this navigation bar design
This navigation bar design floats instead of sitting flush with the top of the screen. A rounded glass pill hovers 16 pixels down, blurs the content behind it and stays put as you scroll, so the menu is always one glance away without feeling heavy.
The links sit centred, with five items at most, and a single dark button on the right carries the main action. On a phone the links fold into a menu button, so the header never wraps onto two lines.
Why the prompt works
- It names every link, so the tool does not invent its own menu.
- It gives exact spacing, “16px from the top”, which is what makes it float.
- It describes the material, glass with a blur, rather than just “modern”.
- It covers mobile in one sentence, the line most header prompts forget.
When to use it
Floating headers suit product sites, portfolios and landing pages with light backgrounds. On a busy photographic hero, give the pill a little more opacity so the links stay readable.