On this Webflow lesson we make our navigation bar responsive on all breakpoints. How to setup a fixed navbar in mobile breakpoints in Webflow and we align the navigation elements vertically using flex with Webflow.
All our project files for you to practice and play with along with some bonus materials.
It has been the best investment I made in my design journey so far. I would consider myself a novice but I honestly feel like I've gained a genuine professional insight into the process of creating a high-level website.
I'm an early adopter of the KreativePro Masterclass, and I love how well put together it is. Neftali takes you through each step of the process from paper sketches to marketing all with fun visuals & clear instructions!
let's jump into the navigation bar
we have four different nav links
and we can access our breakpoint to
tablet
can access some of these settings if we
click on the menu button
that it provides this is created by
default
with webflow and notice how they have
given us some options how we want the
animation to happen we want it to slide
over from the right
so the navigation comes from the right
but then we lose the icon
or do we want this to come from the left
so this is some really nice options that
they give us
but the option that i want to use in
this particular demo is the drop down
but by default the classes that webflow
provides are are not matching our style
so let's change those
first so let's go ahead and toggle that
open so make sure it's
open and if we start hovering we can see
on the navigator
all the elements that it creates so the
nav menu
is what contains all those links and we
don't have a class for that yet
so let's go ahead and create that nav
bar menu
and let's remove that background color
that comes by default
bring in our dark slight blue so that we
can see
and what i'd like to do is make these
elements start to stack in the middle so
align them in the center and make them a
little bit bigger because when you're on
a phone these font sizes are a little
bit small
and i want these buttons to really stand
out so now that we have that selected
let's go into each nav bar link
make sure you don't select the one with
the current state
because it won't affect all the links
it'll affect only the current one
and so i'm selecting the navbar link i
want the font to be
sovereign which is a nice big bold font
and i want to center that so that it's
in the middle
and let's make the size ridiculously big
just to test it out so about
three rems because there's very little
menu items
i think it's okay that we use a nice big
bold font size
because again this is on mobile so
imagine in a tablet and a phone
i can see how these buttons are easier
to touch that way
alright so okay so this looks good i
actually don't want this button to
expand all the way
so let's make this navbar link so
notice how it has a combo for login if i
just simply tag this inline block it now
creates the button
so that it's adapting itself to the
padding
or the sizing of it maybe we can change
the
padding on the top so it's less padding
right about there so if we say for
example the nav bar menu
i want this to be a hundred pixels
notice what's happening it's gonna it's
it's not actually
working let's toggle this off so we can
see better
and what's happening it's not expanding
all the way down and
we want to change this navbar menu to be
a position fixed because we want this
whole thing to be
fixed without moving as you scroll the
page
so if even if i scroll the page now that
full nav bar menu
is is taking control of the entire page
or canvas with the absolute it doesn't
do that it actually
remains to the top so it doesn't
actually understand
the browser size but we change it to
fixed
then that navbar menu will adapt itself
now all we have to do is change so we
can see a little bit of the top logo we
can change the margin offset so we can
just push this down to whatever the size
is about
maybe 60 so that's about 60 pixels that
way we can still see the icon behind
and we still see the close button if we
wanted to change that later
alright then i'd like to have these
elements
vertically aligned to each other so
let's try to add this
as a vertical flex so just like that and
then
center all these elements in there the
problem with doing that is that because
this is a navbar menu that is toggled
with some settings from javascript and
webflow it doesn't really react the way
we want it to
so instead what i'm going to do is i'm
just going to grab
a diff block and i'm going to put it
inside
and i'm going to put all these elements
back inside this diff block
just like that
and this div block is going to have a
class of the flex that we want
okay this flex we already have created a
class or a utility class
but instead we're going to make this
vertical center
we're going to make a combo class and
we're going to center these completely
like that we can actually make this
vertical center we could actually
call it vertical expand
because what it's going to take care of
it's the vertical alignment but it's
also going to be a hundred percent
height so whatever the height is of its
container it's going to adapt itself
because if it's flex
properties and boom just like that we
created this flex element
using a simple diff block and
and taking and utilizing one single
class that we are repurposing multiple
times
if we go back to our desktop it does not
affect at all
our navigation because this does not
we don't have um specifically changed
any value
in the desktop so it's only applied in
the actual
tablet mode so let's jump back into our
menu
this is starting to look good i like how
it looks but
i think that the navbar menu could still
use some
opacity so we could still see the back
so let's go ahead and
make that just barely visible so about
80
88 there we go so now when we hover over
we have that nice menu with the big
icons and big letters
taking care of our button i'd also like
to add
bring back the text that we have on our
on our login button so let's let's do
that
so just need to change where we want
that to be we
move it over to the right side maybe we
can change that to 95
90 90 is good and the text
does need to be on the center it can be
on the left side
so let's make sure we have the alignment
of the text on the left side
we can reduce the amount of padding also
so
right here we have padding 10 so now we
have
more space on the right
than on the left we can expand this a
little bit more so
50 and the hover still needs some work
so
click on the hover state and make sure
that the background image that we have
added
is using the same properties that we
have on the default state
navbar login let's going to add
a we can do this two ways we can add a
border simple border like that
and change the solid to the color white
right there we have that border
or we don't need to make it super bright
we can
tone down the opacity on that border
and this looks good now because this has
no hover states these hover states don't
really matter
on mobile devices but for accessibility
it's always good to take those down and
put a specific
class for pressed so when you actually
push the button
how does that look like or interact so
let's jump in here and
just play around with some of the the
padding here i'm noticing the padding is
actually being
a little bit funky because the font
itself
has some spacing and that spacing is
added
due to the font style that we have so we
can tone down this
to 15 maybe each one
and let's add some margin to each navbar
link so maybe have 20 pixels margin
like that so we can spread them out
spread them out a little bit
we want to make this background go back
to the navbar menu
background and maybe this
change this back here to
90. there we go
okay this looks good guys
this is exactly what we're looking for
now we just need to fix the active state
on the toggle menu notice that this menu
button does not have any class
so let's call that toggle menu
so the class update is going to change
to whatever the color is on this
so let's add that notice how i have the
open state
so that open state means i can start
modifying this class
i don't want to see the delay i just
wanted to have it pop right away i don't
want that to actually slide
so what we can do is select the settings
and have zero duration so that
we can simply click on this and then it
just shows up
because we're going to animate this
later on another lesson
but right now i just want it to show up
i don't want it to have any animation
whatsoever
on its own okay this is looking good
let's take a look at the different sizes
and yeah this is great so let's make
this a little bit smaller on that mobile
breakpoint
all right guys this is great we've
published the uh
site now we have a responsive
menu that that we can play with here
okay this looks good guys
you
Coming Soon
Access our premium community including bonus tutorials, project files & weekly resources.
LIFETIME 💎 ACCESS