# \[Solved\] Secondary sticky Nav or nav that shrinks on scroll

**URL:** <https://forum.bubble.io/t/solved-secondary-sticky-nav-or-nav-that-shrinks-on-scroll/4745>\
**Category:** Need help\
**Created:** [July 27, 2016, 8:07pm UTC](https://forum.bubble.io/t/solved-secondary-sticky-nav-or-nav-that-shrinks-on-scroll/4745 "2016-07-27T20:07:29Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![nordogg](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/nordogg/32/4036_2.png) [@nordogg](https://forum.bubble.io/u/nordogg)\
**Post date:** [July 27, 2016, 8:07pm UTC](https://forum.bubble.io/t/solved-secondary-sticky-nav-or-nav-that-shrinks-on-scroll/4745/1 "2016-07-27T20:07:30Z")

</div>

Hey guys!

I’m trying to figure out how to make a secondary nav sticky. Great example is here:  
[http://demo.hongkiat.com/css-sticky-position/index2.html](http://demo.hongkiat.com/css-sticky-position/index2.html)

or

[http://designmodo.com/demo/stickynavigation/](http://designmodo.com/demo/stickynavigation/)

Is this possible?

---

<div class="post-metadata">

**Author:** ![fayewatson](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/fayewatson/32/2686_2.png) [@fayewatson](https://forum.bubble.io/u/fayewatson)\
**Post date:** [July 28, 2016, 1:08am UTC](https://forum.bubble.io/t/solved-secondary-sticky-nav-or-nav-that-shrinks-on-scroll/4745/2 "2016-07-28T01:08:08Z")

</div>

I’m not sure if this is the most efficient/cleanest way to accomplish this – but I made three floating groups to obtain that secondary nav sticky effect. Two floating headers (that say ‘fixed’) remain in place on the page (so the float setting for both of them is set to ‘nothing’). Then I used a third floating header (hidden on page load) that only becomes visible once the current scrolling position of the page is greater than 100.

Preview:

> **[Bubble - Visual Programming](https://forumapp3.bubbleapps.io/version-test/sticky_second_header?debug_mode=true)**
>
> Build stuff without code and launch a startup without a tech-cofounder! Bubble is a visual programing language. Instead of typing code, use a visual editor to build applications.

Editor:

> **[Bubble Editor - Forumapp3](https://bubble.io/page?type=page&name=sticky_second_header&id=forumapp3&tab=tabs-1)**
>
> Build stuff without code and launch a startup without a tech-cofounder! Bubble is a visual programing language. Instead of typing code, use a visual editor to build applications.

---

<div class="post-metadata">

**Author:** ![nordogg](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/nordogg/32/4036_2.png) [@nordogg](https://forum.bubble.io/u/nordogg)\
**Post date:** [July 28, 2016, 1:52am UTC](https://forum.bubble.io/t/solved-secondary-sticky-nav-or-nav-that-shrinks-on-scroll/4745/3 "2016-07-28T01:52:40Z")

</div>

Interesting! I will give it a go!

---

<div class="post-metadata">

**Author:** ![nordogg](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/nordogg/32/4036_2.png) [@nordogg](https://forum.bubble.io/u/nordogg)\
**Post date:** [July 29, 2016, 4:30am UTC](https://forum.bubble.io/t/solved-secondary-sticky-nav-or-nav-that-shrinks-on-scroll/4745/4 "2016-07-29T04:30:30Z")

</div>

This is working great BTW. Thanks again!

---

<div class="post-metadata">

**Author:** ![fayewatson](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/fayewatson/32/2686_2.png) [@fayewatson](https://forum.bubble.io/u/fayewatson)\
**Post date:** [July 29, 2016, 5:47am UTC](https://forum.bubble.io/t/solved-secondary-sticky-nav-or-nav-that-shrinks-on-scroll/4745/5 "2016-07-29T05:47:32Z")

</div>

Awesome! No prob! 🙂

---

<div class="post-metadata">

**Author:** ![stevenrichardlevy](https://avatars.discourse-cdn.com/v4/letter/s/3bc359/32.png) [@stevenrichardlevy](https://forum.bubble.io/u/stevenrichardlevy)\
**Post date:** [October 15, 2020, 1:29pm UTC](https://forum.bubble.io/t/solved-secondary-sticky-nav-or-nav-that-shrinks-on-scroll/4745/6 "2020-10-15T13:29:25Z")

</div>

I feel like the examples here are not working anymore

I am trying to acheive the same result as OP but cant recreate it,

---

<div class="post-metadata">

**Author:** ![maze](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/maze/32/166758_2.png) [@maze](https://forum.bubble.io/u/maze)\
**Post date:** [August 12, 2021, 8:32pm UTC](https://forum.bubble.io/t/solved-secondary-sticky-nav-or-nav-that-shrinks-on-scroll/4745/7 "2021-08-12T20:32:59Z")

</div>

this is easily doable by using this this plugin: [🚀[NEW PLUGIN] Scrollable Animation](http://forum.bubble.io/t/new-plugin-scrollable-animation/147852/) 🙂
