Webflow Fixed Navigation

Hey guys.
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
"nav-logo"

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

not establish.
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
good.

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

hover state.

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
over here.

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
features.

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.