Original subtitles

Let's now transform our simple navigation bar

into a mobile navigation.

And this is gonna be no easy task

and it's gonna require a lot of code,

and so let's get started right away.

So basically what we want to happen

is that once we reach our break point here,

so this one right here,

we want all of this menu here to disappear

and instead we want a menu button to show up right here.

So just as I said before,

this is something that I'm sure you have seen

on other webpages and also on mobile applications, right?

And so let's actually start with that.

So adding that menu button right here.

So, let's go to our HTML,

so this button of course needs to be in our HTML

from the very beginning.

So that's here in the header

and let's put that after this navigation.

So we have this logo, then the navigation

and then a button, which I'm gonna call

button for the mobile-nav,

so mobile navigation.

And now here insight, we simply want an icon with the menu.

So let's come here again to our I and icons.

And so this here is kind of the standard icon for menus.

So copying that.

All right..

Let's add a class,

of icon mobile navigation.

And actually we will also want an icon

for closing the navigation.

So let's quickly get that.

So close.

Okay.

Let's duplicate this.

And, and actually, I remember it was just close here.

So we're adding these two icons here because basically what

we will do is that the default icon is going to be this one

with the menu. And then when the user hits this button,

then the mobile navigation will show,

and then we will hide this first icon,

and display the close icon.

All right. So when the navigation is hidden,

we show the menu icon. And then when it's visible,

we show the close icon to give the user the option to

close it.

Okay.

Let's copy this here

because of course we will need to style it.

And the other one is icon mobile nav.

So that's at the very top of the file here.

So yeah, right here.

Let's just add a small comment here.

So this one

and

icon.

And let's see what it looks like by default.

So we have this button here, let's make it at 100%.

And of course, thanks to flexbox.

it is also vertically aligned.

And since we have justified content set to space between

now this part here is centered between these two.

Right. But of course we will then make this part here

invisible and only show our button.

But anyway, that's now format this button here.

That's right here.

So we need to get rid of the border

and also have the background color.

So we usually set simply background to none.

And we also wanted to have this pointer cursor.

Okay. And then quickly also the icon here.

So let's see what we have here.

So let's make it a 4.8 REM

of height and also

of width,

and the color let's use our darkest gray.

Now okay.

So that looks nice. But of course, by default,

we want one of them here to be hidden.

All right. So we want to now select this one here.

So the closing one and then hide that.

So how are we going to do that?

So here in our HTML, we could now of course,

add another class here and call this one here,

like the menu button and this one, the close button.

However, here, I want to show you another selector.

So let me,

so just because now we don't have it here side-by-side,

I'm copying all this, but you don't have to.

And I'm going to paste that here into a comment just so we

can see the code.

Okay.

And so I will now use this selector here again.

And then what I want to do is to select this element

based on this name attribute that is here.

So that's what's distinguishing these two icons here.

So this one has menu outline and this one has a close

outline.

Right?

And so we can actually select in CSS based on attributes.

So for example, like this name one here,

so the way we do that is with these square brackets.

And then we simply write this so we can simply write

name equal

menu outline.

Right.

And actually the one that we want to hide here now is the

close one.

So the second one, so we don't need this anymore.

So display none.

So now this is turned off.

So that close icon is gone. But then later,

once the user clicks on this button,

we will switch from the menu icon to the close icon.

All right?

Now, of course,

by default this should here be completely hidden.

Right?

This should not exist.

And so by default, of course, we need to turn this off.

So make it hidden.

Right? So this entire button right now,

so display none once again.

And so then of course it is gone.

Okay. So by default for normal width, we want it to be gone.

But then of course,

once we reach this media query here that we have been

working on, we now want to show that button.

So mobile navigation,

so display and let's display it as a block level element.

So let's wait for it.

And there it is great. So that part was easy,

but now it comes the harder part of actually styling

and creating a mobile navigation.

So this mobile navigation will need to work for this width,

and for all the other, width that will come later.

So for example, even on a small phone,

so something like this,

which right now doesn't really work because of this white

space here.

So let's just go with this one here.

So what I want to do now is to basically overlay the

navigation over this entire screen here.

So creating like an overlay and then having these menu items

here, one after another displayed here vertically.

So first how it works then below the meals,

testimonials, pricing, and then that call to action button.

And again, having all of that on top, basically on the page.

All right.

So the way we are going to do that is to basically remove

this element from here, using CSS with absolute positioning.

So let me show you how we could do that.

First of all, we need to of course, take a look,

what elements we're actually talking about.

So it's this main nav here, right?

So this is the one that we basically want to now position

absolutely.

And make it so that it basically occupies the entire screen.

So main nav, let's copy that.

Let's first, I give it a background color.

So we see what we're doing here.

Let's say blue,

and now we want to position it absolutely.

Let's put it at the top and a left of zero for now.

And now as always, when we position an element, absolutely,

we first need to make the parent element positioned

relative.

Right?

However that might not really be necessary

because actually we don't

want to position this in relation to the header.

But really to the entire view port.

And so we can simply leave it as it is for now and just

test it out.

Okay.

And so this element has already been taken out of the flow

here.

So it's basically no longer a flex item like it used to be.

And instead it is indeed here in the corner.

Let's actually give it a white background so we can see it a

bit better.

And so now let's make it occupy the entire screen.

So first of all, with 100%,

and then the height,

remember how we can make it stretch all the way from top to

bottom.

Well,

we can give it a height of exactly 100% off the view port.

So 100 view port height units.

Remember that?

So let's see what that's going to look like.

And indeed, that's already looking quite nice.

Okay. And now let's make the text bigger here,

center everything here inside of this container.

So putting it here in the middle and also stack these

navigation items. So having one after the other,

as I mentioned in the beginning .

Now,

in case you're wondering why we are doing the design like

this and covering up here almost all of the hero section.

This is of course just temporary what we're doing here.

So by default,

this navigation here will of course be hidden and it will

only be shown once the user clicks this button.

Okay?

So again,

this is just going to be the open state, but by default,

of course,

we will be able to see the hero section that is underneath.

Okay?

And to demonstrate that let's actually change the color here

to something transparent.

So clicking here and let's do something

really small or really big.

So actually a very little transparency here,

but it's going to be enough to see the effect.

And so now let's, as I was saying, center, everything.

And for that,

we're going to use display set to flex because I think that

right now, this navigation is not a flex container,

but let's check that out.

Main nav.

Oh and actually we hadn't yet done anything on it.

And so it was not a flex container yet.

So align items center and justify content center.

So as always centering both horizontally and vertically

using this flex box trick.

Okay. But now this main nav list,

which is the actual UL element.

So this one here,

now this is already a flex element because we used it to put

these list items here side-by-side.

Right.

So right here.

But now what we want to do is to change the flex direction.

But now what we want to do is to simply change the flex

direction there.

So to have them stacked on top of each other,

so flex direction and set it to column.

Now let's maybe increase the gap back.

So we reduced it, I think here before too.

Well, maybe we didn't, but I do think that we did.

Yeah. So here we changed it to 3.2.

Let's put it back to 4.8 now.

4.8 REM.

Let's give it a save and nice.

So that's looking a lot better than before already.

And of course it is nicely centered and well,

now we still have some elements here,

which are giving us too much space.

So that's this here.

So that's why we cannot go this low,

but it will work also later once we can do that.

All right. Now let's just increase this text here a lot.

And that should then be enough.

So that's this code right here.

So font size three REM.

Okay, beautiful.

Now this might appear to be way too big here,

but if you actually see this on a mobile device,

like a phone, then it will look just right.

All right. So this was the easiest part.

So hopefully you were able to follow up until this point

because now we actually need to hide this here.

So all of this container in a correct way,

and also come up with basically a mechanism that

we can use later in JavaScript to create the effect of

showing and displaying this navigation.

So we will not be able to do that functionality.

So when we click here that the navigation actually show with

CSS alone.

But what we can do is to already prepare everything and

basically do that manually.

So let me show you what I mean with that.

So first of all, we need a way of hiding this navigation.

So because by default, of course it should be hidden, right?

So hide the navigation.

Now we have used this before, so doing display none.

Right?

And so if you take a look, then of course it has gone.

Now the problem with display none is that when we use this

on an element, we can do no animations.

So transitions will not work when we have display set to

none.

So that's really, really annoying.

And so we will need to find a way around this.

So let me write that here allows no transitions at all.

Now, we move down here.

So I wanted to actually comment it just like this.

And so the first thing that we will do here is to set your

opacity to zero.

So this,

I think we have also done before in order to hide an

element, but this does not exactly hide it.

So this is not enough to just set opacity to zero,

but more about that in a bit later,

because let's now actually animate this value here,

because this is a value that we can indeed animate,

while display none, we cannot animate.

So as I just said before, right.

So if we check out then the element is still gone, right.

And that's because it has the opacity of zero.

If it had like 20%, then it would be a little bit visible,

right?

So it's barely visible now here on top, but again,

let's set it to zero.

Okay. But anyway,

now it's time to actually start thinking about the mechanism

that we're going to use to show and hide the navigation.

And so what we're going to do now is exactly what we did in

the component section.

So in section number six, where we built that accordion.

So back then,

remember we added a class to the element that we wanted to

be open. And so then based on that class,

we applied to different styles.

So we style to the element to then be open.

And show a small box beneath the main part.

So remember that, and if not, then that's not a big problem.

So let me just show it to you here in our code.

So here,

we're going to do the same thing and we will add a class to

the header whenever the navigation is open.

So let's call that class nav open here.

And so this is the class that will be added and removed

using JavaScript.

And so whenever the navigation is open, nav open

will be present here on this header element.

All right? So that's a very,

very common technique when we build components like this,

which need to change their state a little bit based on

JavaScript later.

So we're gonna be able to write some very,

very simple JavaScript,

which we'll simply add and remove this class here,

depending on whether the user has clicked the navigation

button or not.

But anyway,

let's not pretend that the navigation is currently open.

And so then we can apply styles based on that.

So see how this nav open here is now a parent of main nav,

right? And so we can use that in our CSS like this,

so nav open and then main nav

then the opacity should be back to one.

All right. And so if we check this out now,

then here it goes. So now it's back.

So let's see that indie inspector here.

So indeed here is the nav open class.

And so therefore we now have this code that we just written.

So basically when the nav open exists,

then this main nav style here can be applied.

But of course, if we were to remove this class from here,

then the selector here would no longer apply.

We can actually simulate that here by simply deleting

it, hitting enter,

and then that style is gone, right.

Simply because that selector now does no longer apply.

So this one here,

it cannot apply if this class is not on the page. Right.

And so that is the whole idea behind this trick.

Okay.

Now let's add an animation here.

Let's do that before.

So transition all and 0.5 seconds.

Okay.

And to show you that we actually need to reload to make that

class back.

And now if I remove it here,

then actually the animation should already be showing.

So you saw that it faded out here a little bit

over that half second.

So that part, we already have it working.

All right.

But now remember how I said that this is actually not enough

to hide the navigation.

So to hide a navigation properly without using display none

we need to do a couple of steps.

So this one is the first one, which is to hide it.

So hide the element visually.

Then second we need to make it

and accessible to mouse and to keyboards

because otherwise, if we do not this,

then if we hit the tab key, for example,

it will still go to the links that are in that hidden

element.

So, because that element is really still on the page.

So display none does really remove the element from the

pages flow. It is as if the element does not exist,

but with opacity set to zero,

all that happens is that it becomes invisible.

Right. But things like keyboard taps,

they can still then end up there.

So even if it's visually hidden.

And so in order to prevent that,

we need to set pointer events to none.

All right.

And then finally the third step is to also hide it from

screen readers.

So basically telling screen readers that this element is

really hidden.

So we do that by setting visibility to hidden.

And so this is the correct way of hiding an element without

using display none.

Okay. But then of course,

when we want to open the navigation,

we need to set all of that back to normal.

So 0.3 events to auto

and visibility to visible.

Now these CSS properties here,

they probably look a bit strange, like a bit obscure,

like this one here especially

because this is one of those that you will very

rarely use.

Right?

So if you need to build something like this,

you just come here and basically copy this line of code and

that's it.

This is one of those properties you will probably never like

memorize.

Right?

Okay.

So let's put it back here. And again,

we could now remove to see or to test it,

but that's not really necessary because what I want to do

now is to actually change this menu here to the close.

Right.

So that's what we said in the beginning that whenever the

navigation is actually open that, then here,

we want to show that other icon that by default is hidden.

Right?

So that's right here.

So remember how we did hide that closing icon, right?

But now at the time has come where we want to actually make

it visible.

So let's copy this.

Paste this here.

Now here let's display block.

And here we can use display because we don't need any

animations here for this icon.

All right.

Now, when do we want this to happen?

Well, only when the navigation is open.

So only when this class here does actually exist in our

HTML.

So only if that class exists,

then this selector here does apply and it will then show the

close icon.

So you'll see that now it is here,

but of course then also that one is there.

So let's quickly hide that.

And that's very simple. We just copied the same code.

This one is called probably menu or something.

Yeah.

So the menu outline this one should have display none.

And again,

here we can use it because animations are not necessary.

Just to make sure, let's reload.

And indeed that looks just like, we want it to be.

So I'm cutting this here or copying and then removing

and you see that it turned now into the menu and

everything is gone.

But now let's double click again at a space and

edit back on.

And then once I hit enter,

see how the menu will appear back here and also how this

icon here will change.

So let's see.

And there we go.

Beautiful.

So that's really amazing, right?

So just the power of simple trick,

like this of adding and removing this class here. And again,

we will in the next section use JavaScript

to very easily do that.

Okay.

So we could call it a day here and actually say that we are

ready because this is already working quite nice.

But actually I want to just add one more thing here,

which is another really, really cool effect

which is to basically have this whole navigation here,

come sliding in from the right side.

And again,

I'm sure that you know exactly what that effect looks like

from other web pages or other mobile applications.

So let's think about how we could do that.

Well, we could simply basically move this entire thing here

completely out of the page.

So basically here to the right side,

and then once the navigation becomes visible,

then we slide that back in here.

So move it basically here with some animation.

And the way we can do that is to once again,

use the transform property.

Okay.

So let's do that on the default state,

which is basically this one here,

which is also the one that has the transition.

So let's add that maybe here,

so transform and then translate.

And this one,

do we want to translate it horizontally or vertically?

Well, of course in this case here horizontally.

And so that is the X axis.

All right.

So basically we want to move it out of the screen

completely by exactly its own width.

And so that is 100%, right.

So let's see.

That now the problem is that we can still see it by

scrolling to the right.

You see that? So I'm basically scrolling here to the right,

but do that also by clicking here.

And so of course that is not what we want.

So this should be really hidden here on the side and then

simply move in.

Right?

So let's do that.

And for that, we need to use yet another new property.

So let's come here to general

and this is something we

always do actually, when we build a page like this.

And so what I mean is that here we will set the overflow,

but not just overflow, but overflow X,

so horizontally to hidden.

And so what this means is that all the elements that

overflow the view port in the X axis,

so horizontally, will simply be hidden.

All right.

And so with this, well, it should be gone actually

while it's not.

And so let's also set it on the HTML so many times we need

to set it on both.

All right.

So not just on body, but exactly on body and on HTML.

So let's see that

reload here

but well,

that is still not really fixed.

Oh. But the reason for that is that this element here is

positioned relatively to the, basically to the view port.

Okay.

So remember that we set this here with position absolute,

but we didn't then declare the header to being positioned

relative. Remember that?

So I said that maybe it wasn't necessary,

but actually it is necessary.

So one more, a little bit strange thing about CSS.

So basically this only works

if there is nothing

absolutely positioned in relation to body.

And so that's what right now, our main navigation is.

So instead we need to set it to its closest parent.

So to header here, right?

So back here in the top,

let's set the position here

to relative.

And so that should now be fixed.

So we should have done that right in the beginning.

So as I said, whenever we position something absolutely,

we should always put position relative on the parent element

in relation to which we want to position this one here.

So I skipped that. And so now that created this problem,

but now you see, as I try to scroll vertically,

it doesn't work.

All right.

And just wanted to show you something else,

which is if we set this here actually to

completely overflow,

so not just X,

then we wouldn't be able to scroll at all.

So in no direction.

So I'm trying to scroll right now, which you cannot see,

but I am trying. And so the page is not moving at all.

Of course, that's not what we want only in this X direction.

All right, great.

So we moved the whole navigation here to the right using

and now let's set it back basically to the initial state,

once the navigation is open.

So we want to transform translate it to zero.

Okay.

And it's actually very important that we use the transform

property to do this animation because this is way more

performance, than for example,

doing the same thing using the left property.

So we could also have used the left property to create this

animation,

but then the animation would not be as smooth

as it should be.

So again, transform is a very,

very common property that should be used for transitions

because while these kinds of animations,

they have been optimized by CSS for this property,

and a couple of others, such as the opacity.

Okay.

So now let's try that.

Just making sure here.

Let's copy that,

remove it and beautiful.

So you saw how that moved out there.

Let's put it back

and there it is.

Beautifully moved in here.

Okay.

And with this, we are done basically.

I just want to show you here now finally,

the third value that we can specify in transition.

So I mentioned way back that I was going to tell you more

about the transition property.

So let's quickly do that now.

So remember that the first value here is which property we

want to animate, then it's the duration,

and third is the type of the animation.

So if we don't specify anything,

then by default the transition is linear,

but we can also specify like a transition curve,

which is how we call it.

So for example,

we can choose ease or ease in or ease in out or this one.

So let's try ease out and let's try it over two seconds to

see the effect a bit better.

And so again, I will now remove this here just so

we can see it happening.

And maybe you saw that the animation was a little bit faster

in the beginning.

So if I said, it's back here now,

then see how it was a bit fast in the beginning and then it

slowed down significantly.

So let's do it again by hitting command or control Z.

Right. And then put it back.

So that's a trick that I actually just found out for the

first time.

Right.

But now let's try it maybe a bit faster and let's try it

with ease in.

So reloading actually,

and then I'm removing it.

And so did you see that it was a bit slower this time in the

beginning and then in the end, it speed it up.

And so easing in basically means that it starts slow and

then it moves faster in the end.

So you saw that it was again slow in the beginning and then

it speeded up.

We can also use ease in out.

And the best thing to do here would actually be for you to

experiment with this on your own,

because that would be the easiest way of seeing this than me

just showing these different things here.

So this one basically makes it fast in the beginning and in

the end and slows down a little bit in the middle.

And again, it's not so easy to see that,

but I'm showing you this because here I actually want to use

ease in.

And then in fact, with half a second.

And so,

this is the effect I was going for.

So having it move fast in the beginning and then slowing

down at the end.

Okay. And, with this,

we actually finally finished this mobile navigation.

So that was a lot of work,

maybe some confusing things that we did here as well.

And so please make sure to review everything that we did

here in order to make sure that you understood what's going

on here so that in the future,

you can implement a mobile navigation like this on your own.

And maybe you will even be able to customize this.

So you don't have to create exactly the same kind of

navigation for yourself in the future.

Right. But the overall logic will be the same, for example,

things like this additional class here and the way that you

hide it in the beginning.

So again,

make sure to understand this and then let's move on to our

next category of breakpoints and media queries in the next

lecture.