---
title: "FloatingNavbarscroll — Framer component · Best of Framer"
description: "$15.00 · Framer component · by Dulaj Design · Effects. A smart, animated nav bar"
canonical: "https://framer.elliotli.dev/component/floatingnavbarscroll"
---

[Home](/)/[Components](/components)/[Effects](/components/category/effects)/FloatingNavbarscroll

# FloatingNavbarscroll

A smart, animated nav bar

[View on Framer](https://framer.com/marketplace/components/floatingnavbarscroll/?via=elliot-li)

![FloatingNavbarscroll preview image 1](https://framer.elliotli.dev/og/component/floatingnavbarscroll/d285249cd9c675c8/1600x1200.jpg)

## Summary

A smart, animated nav bar

## Description

### About

Floating Nav is a sleek and modern navigation component designed to give your Framer sites a premium, polished feel. It stays pinned to the top of the screen but reacts dynamically as users scroll, making it the perfect choice for landing pages that need to feel interactive and high end.

### What it does

It renders a fully responsive navigation bar that floats over your content. The component handles your logo, navigation links, and a call to action button in one compact layout. What makes it special is the scroll behavior; you can set it to shrink slightly or add a shadow once the user moves down the page

### What you can customize

**Content and Links:** Easily update your brand logo text, CTA button label, and manage up to four navigation links with their respective URLs.

**Visual Styling:** You have total control over the background color, text color, and the intensity of the backdrop blur for that popular glassmorphism effect.

**Scroll Effects:** Fine tune the scroll experience by setting the exact vertical distance before the bar transforms. You can customize the scale factor and add a custom shadow to make the bar pop when it’s active.

**Typography:** Set independent fonts for your logo, links, and CTA button to ensure the navigation perfectly matches your existing brand identity.

**Device Settings:** Set custom pixel breakpoints for tablet and mobile views so the navigation looks perfect on every screen size.

### Great for

-   SaaS and startup landing pages
    
-   Personal portfolios and resumes
    
-   Product launch pages
    
-   Minimalist blogs and articles
    
-   Any site needing a sticky, animated header
    

### Need help?

Questions or feedback? Reach me anytime: [**dulajdilshan766@gmail.com**](mailto:dulajdilshan766@gmail.com) or on X @Dulajweb

## Rank history [How rankings work →](/terms#rankings)

-   All · #7126

## Details

- **Author**: Dulaj Design
- **Price**: $15.00
- **Published**: 2026-06-05
- **Updated**: 2026-09-03
- **Added**: 2026-05-27
- **Categories**: Effects

## More like this

-   [Particle Image](/component/particle-image) — Jamik · $12 — Logos and photos as 3D points
-   [Ascii Portrait](/component/ascii-portrait) — The Black Sheep · Free — Photos that dissolve into ASCII
-   [Sandfall](/component/sandfall) — Cyedi Creative Studio · $5 — Your headline, buried in coloured
-   [Still Water](/component/still-water) — DariStudio · $9 — Water ripples over any photo