About this block

Centered Oval is a pill-shaped sticky navbar that floats near the top of the page and remains fixed as the user scrolls. A three-column grid holds a logo mark and wordmark on the left, a row of four navigation links optically centered in the middle, and a ghost "Sign in" button alongside a solid "Get started" button on the right. The whole bar carries a frosted-glass effect so the page content shows through as it scrolls beneath.

On narrow screens the center links and CTA buttons disappear and a hamburger icon appears at the right edge of the pill. Tapping it opens a slide-in sheet from the right side of the screen that lists the same links as full-width tappable rows, followed by the two action buttons stacked at the bottom. The logo, link labels, and button copy are all plain strings, so you can update them without touching layout code.

When to use

This navbar suits a project management workspace where a polished, modern first impression matters on the marketing or landing page. The floating pill silhouette reads as premium and compact next to a full-bleed hero, and the optical centering keeps the nav links feeling balanced even on wide viewports. Use it when you want a header that recedes into the background rather than anchoring the top edge, and when your link count is four or fewer so the pill does not feel crowded.

A natural flow around it on a Modern SaaS page:

Before

• Nothing above the navbar. It is designed to sit at the very top of the page.

After

• A hero section to fill the fold directly below the floating bar.
• A logo cloud to establish social proof immediately after the hero.

What you can customize

The block keeps its three zones independent, so you can adjust each one without affecting the others:

• Navigation links. The links array drives every rendered anchor in both desktop and mobile views, so adding or removing a label updates both at once.
• CTA buttons. The ghost "Sign in" and solid "Get started" buttons are separate elements; you can relabel them, change the variant of either, or remove one entirely if a single action is enough.
• Logo mark. The square icon badge and the wordmark beside it are plain inline elements, so you can swap in your own icon component and product name without restructuring anything.

Tip: keep the link count to four or fewer. More items stretch the pill on mid-size screens and push the CTAs out of the visible area.