Let’s create a sticky nav that transforms,
depending on the section of the site,
the first thing we, We’ll
switch to the layers panel.
We want to have this
not relative but absolute.
And we want to
remove the background.
So this is the style that we want to keep for this.
And we also want to adjust the Z index to about three.
So let's just preview that.
So now we have the look that we want, but we want
a navigation
to show up here.
So what we'll do is we'll take this one and we'll duplicate it.
So CMD+D on Mac.
Duplicate.
Then we're going to
have our navigation transform.
So we're going to make it fixed.
I'm going to have it about
20 from the top.
I'm going to adjust.
I'll make it a fixed with.
I'll make it about 960, 960.
I'll add a
so I'll leave it at that fill
and then I want to add a radius of
20 like that, and maybe I'll just add a shadow.
So very subtle shadow.
I'll make it about that much
and then I'll just
maybe introduce a little bit of color,
something like that.
And reduce to
about...
All right, so I'll leave it at that.
So now I have my second nav, but I want
to the nav to transform here.
So test, just added my second navigation.
Let's see what happens.
Now I have a sticky, but it's always visible.
But I want it to disappear once it reaches here
appear in this section and disappear when it reaches that section.
So what I'll do is, if I select my section, features
it already
has a scroll section called Features.
And if I go back to my second nav, I'm going to add an animation.
So I'm going to add a scroll animation
section in view,
set to section features,
bottom and I'm going to keep that,
but animation will be slide in top
So let's test, So let's just
increase the viewport
height, the section came into view,
so just increase the viewport
so it doesn't just show up.
All right.
So now
the second one should show up.
If it’s bit early, we can adjust that
and once reached here
it's gone.
It disappears because I have exit
I can remove the exit
to have the nav stay there.
I'm going to remove that
and I'm going to
keep that exit because I'm
going to add a third nav, So
this one will be
for FAQ and I'll just make
a tiny adjustment, make this
about 40.
And now the effect I want to add is a background blur but doesn't show up here.
So I'm going to go to
my Framer menu
select background blur
and now I should see it here BG Blur.
So now I have a background blur.
I can always adjust that later.
I'll leave it as ten and then let's preview that.
So first nav comes up,
and now I have this one
and then this third one comes in.
So I can always adjust
when this shows up, but
that disappears.
So I'll just go back here, take this away.
And I should have three
different
navs depending on the section.
Thanks for watching! Like, comment and subscribe for more videos!
Check out the links in the description!