Navbar prompt
With a planA sticky navbar that starts as a full-width bar with a text link and, after a little scroll, shrinks into a floating glass pill with a filled button. Shown over an aurora hero with glass cards and a refraction-edge rim. Includes an accessible mobile sheet.
A picture of the design. The live, interactive preview, the full prompt and the code unlock with a Dapols plan. See the plans.
Want this on your own site? Pick it for your plan.
Everything on this page except these four tabs is free to read. The tabs unlock with a paid Dapols plan.
Morphing Glass Navbar is included with every Dapols plan
Free visitors get the free prompts. Any Dapols plan, the one-time setup or the monthly subscription, unlocks every prompt.
Unlocking this prompt gives you:
Already have a paid plan?
Not on a plan yet?
The preview, description and FAQ on this page are free. A plan unlocks this prompt and every other one in the library.
See the plansWant to try one now? Browse the free prompts.
A navigation bar does its best work when it stays out of the way, then steps forward when you need it. This one starts life as a quiet full-width bar with a hairline underneath and a plain text link for the main action. After roughly 24 pixels of scroll it smoothly contracts into a compact floating pill with a frosted glass background, a bright specular top edge, a thin refraction-style rim with a warm amber caustic, a soft underglow, and a filled saffron button in place of the link. The preview stages it over an aurora hero with tilted glass cards and a glowing orb, so the glass has something real to refract. The change is driven by a tiny observer rather than a scroll handler, so it stays light on the main thread. On phones the links move into a menu button that opens a full-width sheet with big touch targets, a proper expanded state, focus that moves in and wraps, and Escape to close. It suits product sites, studios and publications with long pages and a call to action that should stay one tap away. Light and dark themes are included, and visitors who prefer reduced motion get an instant switch instead of an animation.
Pairs well with the Nocturne, Orbit and Lumen Looks in the Dapols website studio. See website examples.
A tiny element sits at the very top of the page. A browser IntersectionObserver reports when it leaves the screen, which happens after about 24 pixels of scroll, and the component switches to its pill state. It also works if the page loads already scrolled, and a plain scroll listener is used only as a fallback.
Yes. It is a real button with an expanded state and a clear label, the sheet is hidden from keyboard users when closed, focus moves into it when it opens, Tab wraps between the button and the sheet, and Escape closes it and returns focus to the button.
The pill still has a semi-transparent background, a hairline border and a shadow, so it stays readable. If you want a fully opaque fallback, ask your AI tool to raise the glass opacity to 0.95 for browsers without backdrop-filter.
HeroWith a plan
A calm, confident hero on a sheet of grainy paper: one huge tight-tracked headline with a hand-drawn accent loop, a topographic contour map of a mountain lake as the only graphic, one button and one quiet link. Warm off-white, near-black and one restrained accent.
HeroFree
A night-sky hero lit by real aurora curtains of mint, lime and cyan rays, with the headline held in a frosted-glass card with a specular rim, fine grain and floating glass tiles. Includes a pale-fog light theme with the same hues.
PricingWith a plan
Three pricing plans with a deep emerald, glowing middle plan, a glossy ribbon, a real monthly and yearly switch, icon chips, check-bubble feature lists and an all-plans strip. Aurora glow, fine grid and grain behind a calm emerald palette.
Need a whole site, not one section? Pick the designs you like, choose your colors and fonts, and Dapols builds the website for you as part of your plan. Answer a few questions about your business to get started.
