Clear to sticky navbar white

Design help Animations & Interactions
1

How do you create a sticky navber after scroll, but clear at first like this: http://flycms-template.webflow.io/

My goal you will see here: http://valley-expetec.webflow.io/managed-services is to make it white on scroll only.

If there is a free version that does this please send link.

please advise. thank you,
Jaime G.

Here is my public share link: LINK
(how to access public share link)

2

Hello @JaimeGizzle.

Such effect can be done by using 2 navbars.
1st navbar

    position: relative;
    background-color: transparent;

2nd navbar

    position: fixed;
    left: 0px;
    top: 0px;
    right: 0px;
    display: none;
    width: 100%;
    background-color: white;

Then there is 2 interactions.

  1. for scroll-navbar (2nd) initial state:
    transform: translateX(0px) translateY(-80px); (move navbar up)

  2. for section (or any other element), which activate navbar appearance:
    trigger = scroll
    affect different element = class of scroll-navbar

Scroll into view :

display: block;
transform: translateX(0px) translateY(0px); ( move to origin)
transition: transform 500ms

Scroll out of view:

display: none;
transform: translateX(0px) translateY(-80px); ( move navbar up)
transition: transform 500ms

Hope it helps.

Regards,
Anna

2 Likes
3

Im a little confused as per your instructions and this: Website interactions and animations | Webflow

videos are outdated.

I have my menu setup as a symbol. so that I can get away from copying the menu again.

Then created 2 sections with these selectors:

Nav Bar Clear
Nav Bar White

I think I’m getting confused on the references back to 1st and 2nd.

please advise as to see if this is even possible.

thank you

4

better yet here is the access: https://preview.webflow.com/preview/valley-expetec?preview=d3e953a46fcf8f9d9a823767565d16f0

About us page

please help

5

Hi @JaimeGizzle,
Sorry for a little bit late reply, had some issues with connection and just got a chance to check out your link.

You did almost everything correct, except few things:

  1. menu which you want to appear first (on load) should have relative position

  2. scroll interaction which move up and down 2nd menu should be applied to one of the sections which scroll into view and out of view, not to the 1st menu

  3. just curious, is that menu should be so big?

Let me know if you still will have a questions

Regards,
Anna

6

Sabanna

I appreciate the help.

please refer as:

Nav Bar Clear
Nav Bar White

Id like Nav Bar Clear at the top but if you scroll the Nav Bar White would appear.

It’s not big it’s just custom embed code. within the navbar that will render fine once published.

I got the nav bar to slide in once you scroll now! =)

Now I need Nav Bar Clear to disappear once you scrolll

7

Ok

Here is video screencast: https://drive.google.com/file/d/0B-7cg8BSq1Z_OXg2anZGS2hJRFU/view?usp=drivesdk
I adjusted some settings and made it work. You may want to change interaction time for VE Nav Bar Clear, but it is really hard to see now, without publishing site.

Hope it helps.

Regards,
Anna

8

I tried following you video, but confused as to why you added the interaction to “VE Split Windows Wrap”

I’d like to have this global so not just the about us page has this

9

Interaction exist globally and you can use it on any other page, just choose object (section) which will activate this interaction when will scroll to the view and connect this object to this interaction.

10

https://preview.webflow.com/preview/valley-expetec?preview=d3e953a46fcf8f9d9a823767565d16f0

I tried and failed miserably

11

It is really hard since menu do not look correctly in Designer mode :confused:
What if we will “simulate” navigation so visually it would look correct? In this way it will be easier to build interactions. After you will like results you can put embed code back instead of “simulated” navbar.

12

I went ahead and hid the menu so that you can see it better.

1 Like
13

Well, I had to add headers for show how interaction works. Sure you don’t have to do this :smile:
Here is video: https://drive.google.com/file/d/0B-7cg8BSq1Z_Q19pTXQ4azZZWlE/view?usp=drivesdk

1 Like
14

It works!! http://valley-expetec.webflow.io/about-us

I appreciate the time you put in,

thank you very much

15

:+1: Awesome! Glad I could help :slight_smile:

16

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