Design issue with navbar scroll effect

I need your help with my nav bar scroll effect. When I scroll down my white nav menu should appear on all pages in desktop view but is not.

Hi @Optimal, thanks for the post. Can you please update your post with some more information so we can help you faster? Things like your read-only link, and screenshots of the elements in question really speed things up.

Posting guidelines can be found here: Posting Guidelines for the Design Help Category

Thanks in advance! :slight_smile:

The main nav bar (yellow) and when I scroll down I should be able to see the second nav bar (white with different logo) See image attached.

Hi @Optimal,
If you did not set it up yet, this effect can be done by using 2 navbars. One will be “scrollable” (usualy position:relative) and another one “fixed”(with fixed position). Fixed navbar initially hidden (moved up on 100%). Then create interaction with scroll trigger where “fixed” navbar will move down to correct position, and will moves up when regular navbar will scroll to the view.
Tutorial about using scroll interactions you can find here

If you already have this set up and still can’t make it work, we will need to see your read-only link to your project, like mentioned @cyberdave.


To provide your read-only link, please refer to this article:


Hello, I tried to apply the instructions Anna gave me. Still dosent work. Can someone please have a look at my read only link?

Well, since there is a little bit confusing interactions now, lets start to go through this step-by-step :smiley:

  1. What moment (after scrolling which object) you want white navbar appear on the screen?

After the first picture banner! That you can see in my first print screen sent 3 days ago.

It should work like this one :smile:

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.