Responsive Website in Webflow Part 2

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

‍