On this Webflow lesson we take a look at the Navigation. How to setup a fixed navigation bar as we scroll the page in Webflow and how to add scroll-to animations using Webflow's page sections.
Take a moment to download this Webflow Template so you can practice, experiment and use however you want!
All our project files for you to practice and play with along with some bonus materials.
Student reviews coming soon
All right so the next thing we are gonna
do is start working on our navigation bar.
We have a logo and just some dark
background a nice dark background
with some elements inside.
So the Home, Features, Products and a
login icon or a login button.
Ok, so the way we do this is, if we
toggle and close all these sections
we know this sections are all using the
100vh what we wanna do is click on
the + icon, and go into the components
and if I toggle close all these I can see
there is already some components
pre-made for us.
One of these components that we
can start using is of course the Navbar
By clicking the Navbar it will automatically
add the navbar at the very bottom of
all those sections that we have and we
can start customizing it
so right now let me toggle off the grid
the features, products and login
so we need features, this one is gonna
be products and we need one more
so we can copy this and paste it
and just add this one to be the login
and then for the container or the brand
notice that it gives us kind of the brand
inside of this we can either have a class
and have a background image using the
properties panel or we could just dump
in an image, in this case the image of
the logo that we have already exported
ok there we go...
So I've added the logo right in here
inside this link block, this is actually
a link block so if we were to create a new
one it would just be right here when we
go to basic, this is a link block so it's
just anything that is wrap inside this
will have some link properties, so if
I go over to the property panel,
notice how the link settings allows me
to link to multiple pages within the
project, I can link to a specific section
of the page and we will gonna see a
little bit of this and how it works, but
right now I just wanna make sure that
we have all the elements in place and
by default the navbar component that
Webflow gives us, has some default styles
like for example a background that
I really don't like, but they do that just
so that you have, so you know where
this navbar is located, so let's go ahead
and change that background to the
dark background, over here the default
settings of the navbar, nav-links are
So let's create a class called navbar-link
and we are gonna make this white and
we are gonna apply that navbar-link class
all right, now I wanna make this navbar
stick to the top, similar to how we did
with Figma, you can see here that as I
scroll down this page the actual
navigational bar is fixed to the top
the way we do this with Webflow is
we look for the position in the navbar
and we select position fixed.
So the way this works is: position
fixed is very similar to absolute
the only difference is that it's going
to stay fixed to the browser window
but the first thing we wanna do is
establish a width size so 100%
I want it to be 100% wide and I want
the position to be fixed to the very top.
Ok so once we've done that we are
gonna see that bar is gonna follow us
along the Y axis and if we toggle
the preview mode we can actually
see that a little bit better,
just like that.
Ok, now the only thing we need to
resolve is that these actual buttons
need to align to the right and this
logo needs to align to the left.
And the reason why it's doing that
it's because everything, the component
itself that Navbar brings has a container
we know that containers by default are
always gonna have a Max Width and so
what we wanna do is take out all these
elements outside of this container so
that we are not limited by it's Max Width
and just like that all the elements are now
going to be spread out across from the
right and to the left, because we established
the parent navbar, I like to call everything
else based on the navbar, so navbar and
then dash, whatever the element is or
represents, in this case navbar-logo.
I want this navbar-logo to have a position
absolute and I wanted to have about
20px from the top and 20 from the left
so we can start kind of playing around
with how much spacing we want to have
so that it's centered nicely, right now
this spacing between each of these is
about 20px top and back, so this might
need to be resized a little bit, maybe
this can be 15 and just about there it
looks right, so 15px from the top and
15px from the left.
The next thing I wanna do is start
styling the login button so the login
button we know that is gonna use a
gradient, and we have establish a class
for this, but it's not exactly the same
because we have some text instead
we have an icon here so in order
for us to replace the text with this
icon we need to export the icon and
we can use the gradient that we have
already established from the other classes
and the primary, so let's jump in into the
login and I'm gonna call this, the Navbar
I'm gonna have a combo class called
login, this combo class is only gonna
affect this button and what we are gonna
do is we are going to add the background
of the user that we have...
default... which is a color white
right away we know that the image
background is set but it's really large
and it's tile so we wanna get rid of
the tiling, we wanna make the size
fit correctly so similar to how we have
here, this is about 30px so 30px make
sense, we wanna center this...
right there, and we use the same hack we
did with the typography to hide the
text, so we just add in -999em
and there you go, now we have remove
the text and it's just the icon.
Now we just need to play a little bit
with the spacing so that it matches
this button, we know for sure that the
spacing is about 30%, select this
30% on each side and 15 and 15
so let's go ahead and add 30 here
and 30 there.
You have to remember, we are using a
background image so there is really no
container in here, there is no element
taking a space inside of this box.
Meaning this 30px of the icon needs
to be added or considered into this
actual spacing, so if we were to add 60
because is 30 and 30, it's a little bit
too much so we would have to to that
about 45 and 45 and there we go, we have
it a little bit more align to what we have
in our Figma design.
And we can change the typography and
change the background, we can also add
a secondary background here so we have
the background for the icon and another
background we can have for the gradient.
Now, notice we have 2 layers or 2 different
backgrounds, the first background is on
top, so we wanna switch these so that the
actual icon is above the background behind it.
All right cool, this is all button, these
are all link blocks so because they are
link blocks every link block is always
gonna have a state or multiple states
and you can see here we have the hover
state when you click on hover a little
green label starts to show up, that
label now gives us some properties
that we can adjust, if we want to change
how this will look like.
Ok , because this is the hover this looks
We can actually toggle off going back to
the none, we can toggle this off
and that way when you hover over, we
can toggle this back on, and now
when I select this, on hover I know
that that background is gonna be that
I can also replace that icon on default
so I can use a different type of icon,
in this case I'm going to select the
default icon, so this same icon but
with different color right, so this is
the default state and then when you
hover I want that background to have
the gradient, we can always toggle
the hover state and modify the settings
Next stop is these icons, this nav-links
the default nav-links I want them to be
faded out just a little bit.
That way when you hover over
each one of these I want the opacity
to be 100% just like that, so boom...
We just created a nice interactive hover
using simply the hover states on Webflow
properties, and because these are all
sections within the homepage I wanna
be able to access each one of them
by simply clicking on one of this
buttons, and the way it works is that
when you click on any property link
you can manage the links to a specific
externar URL to a page within the project
or a section of the same page, but
right now there are no sections defined
in order for us to define some sections
we need to toggle on the properties,
the element settings so if you click any
section, we have 5 sections and we click
on the element settings, you will
notice there is an ID, this is a singular
ID name that we are going to provide
to this particular element.
We can call this intro.
And then this section we can call it
So we've identified every section
with an ID name and now if we go
into each one of these, we can
actually use the element settings
and say it to link to a specific section
so home will be intro, features we
can change that to features,
products will be products,
and then the login will be
the sign up.
If we preview this, look how
cool it will start working and take
us to the specific section or region
of the page that we have constructed.
Pretty cool right?
So let's move on to the next section
which is the features.
Access our premium community including all courses, resources & offline downloads.UNLIMITED ACCCESS