Halo NavBar

Halo Nav is a premium animated Framer navigation component designed to transform as visitors scroll.

At the top of the page, it appears as a clean, wide editorial navbar with a light background, subtle active-link indicator, status message, and outlined CTA. Once the user starts scrolling, the navbar smoothly travels to the bottom of the screen and transforms into a compact dark floating pill with a stronger shadow, sage active state, filled CTA, and a more condensed layout.

It also includes a fully responsive mobile version with a compact floating navbar and a full-screen animated mobile menu.

You can customize the brand name, logo accent color, navigation links, link destinations, CTA text and link, availability/status message, navbar width and height, spacing, radius, scroll trigger, animation speed, bottom position, scale, and active-section tracking.

Built to work across desktop, tablet, and mobile, with smooth hover effects, responsive layouts, editable controls, and a dedicated static-renderer fallback for Framer.