Let's work on the hamburger button.
And as we don't have such a button at the moment
on our website,
we have to go back to the index HTML file once again.
The question now is, where do we add our button?
Well, at the moment we have our header here,
that's the total header.
And this header consists of the anchor tag,
which is our WebFood logo.
And then we have the navigation element down here.
As you know, in the mobile view,
which we currently have here on our page,
if we quickly go into the header and onto nav element,
then you see here in the styles tab
that currently due to our media query,
the nav element is set to display none,
therefore, it's not visible at the moment
Instead of this nav element here,
we want to display this hamburger button,
but it should, of course, also be part of the header.
Therefore, it definitely makes sense
to add this hamburger icon below our nav element here.
We'll of course then control that the hamburger button
should not be displayed in the desktop view,
but that's something we can easily handle
with media queries, as we learned.
So let's add this button now.
And as I said,
the button or the icon should be clickable.
Therefore, we'll use an anchor tag for this purpose
because with anchor tags,
we can create references to internal or external pages.
As you saw on the slide,
we will indeed create a link on the existing page
of the website,
but that's something a bit more advanced.
Therefore, we'll keep the reference empty at the moment
and just focus on the button itself,
so where it should be positioned
and what it should look like.
What I'll still add besides the hyper reference here
is a class though to be able to style it appropriately.
And for the class, we could choose a name like
menu button maybe
because this button will open the menu
with the navigation items.
And inside this anchor text,
so in here as content,
we won't have any texts or something like this.
We just want to have these three white lines.
There are different ways to style or create such lines.
I'll go for a pretty straightforward and common one.
We'll just use three empty inline elements,
spans in this case,
and then style these accordingly
to make it look like these three lines.
So we'll just add a first span,
a second span,
and a third span,
like this.
That's already the button from an HTML perspective.
Of course, if we now go back to the page,
well, we cannot see a lot.
The button is actually not visible
because it doesn't contain anything besides, well,
empty span elements.
Therefore, to make it visible,
we should go to the CSS file now.
And in here, I'll scroll up.
Maybe, let's see, maybe below our logo here.
Here we could implement the styles for the button
and we have to refer to two different parts of the button.
So to say, first the container,
which is the menu button class,
so the actual anchor text so to say,
and below that,
let me also add this immediately,
will again refer to the container,
but specifically will style the items inside our container,
which are our span elements,
which will become the actual hamburger item,
so these three different lines.
And actually, I would like to get started with styling
these three span elements here,
because without styling these,
we will hardly see anything inside our button
because the button just consists of
these empty span elements.
Therefore,
I'll just add a width to each of these elements of 100%.
So these elements should use 100% of the space available
inside this button.
We'll then add a height to these.
Here, I'll just add a height of maybe three pixels.
We could also use REM here once again,
but to make it scalable with the font size,
but I think three pixels height are a good choice here
to make it look good on any device widths.
And finally,
we of course need some background color here
because otherwise we cannot see our lines
and here I'll just go for white lines here.
So this will be our three horizontal lines.
We added a width of 100% here though.
So we should also add some width and height
for the actual container.
And for this, we'll go to the menu button,
so to the actual container.
And there we'll add a width
of
maybe three REM.
So three REM, let's see if that's too much or not.
Why am I using REM right here?
Well, above in our header right there,
we are using REM for the height,
so the button should also scale.
Therefore, I'll go over with REM here.
And besides that width, I'll also define a height.
Here we'll go with an equal value of three REM
to achieve this hamburger like look that we saw.
If we now go back,
we cannot see anything here though.
Here if we select the spans or the button,
nothing is displayed.
Why is this the case?
Well, if we select one of the span elements
and go into the computer tab here.
Let's scroll down a bit.
Then you see, no big surprise,
span elements are inline elements.
Now that's not a big problem in general,
but as you learn throughout this course,
inline elements only occupy as much space as needed.
And in case inline elements don't contain any content,
text, for example,
well, they basically are not displayed at all
because what should be displayed?
There is nothing there that we could show in the browser.
How can we change this?
Well, we have multiple options.
One option would be to go back to the code,
into the HTML file
and go to the spans down here
and add some texture, for example,
if it would save this and go back
and you could see at least this first span element,
but of course that's not what we want
because these should be empty,
so not the correct solution for us.
Therefore, let's delete this.
Alternatively, we could go into the styles.
Yes, sfa once again,
into our spans
and they'll turn the display property to block, right?
We turn these into block elements
and for block elements,
which don't only occupy the space needed,
but occupy the entire space available per line.
So if you go back, you'll see this will also work,
but there is a more elegant alternative
instead of turning each element into a block element.
Because we actually have to arrange
our three elements here vertically, right?
We want to have the first line,
the second one, and the third one,
and these should be equally distributed.
Is there something that comes to your mind?
Well, why don't we turn our menu button here,
the container, into a flex container.
This has the great advantage that the elements
no longer behave as in the elements,
but as block elements.
And we can also use flex box great capabilities
to easily style the hamburger icon.
Therefore, let's go back
and let's remove our display block code down here.
And instead, we'll go to the container here
and add the display flex property.
With this in place, let's see if it worked.
Yes, it did.
Now we have, well, one horizontal line,
but if we inspect this, you see we have one span,
the second span,
and the third span.
And now you might say, well,
I thought we have block elements now in our flex container.
Well, in the computer tab,
if we scroll down,
you'll see that this is the case.
We have this plate block right here.
But remember, we are in a flex box context now.
So we have the flex container
and the flex items in there are now behaving
well, like block elements,
but with the flex direction property of row
being applied by default,
therefore, these are positioned next to each other now.
That's not the desired look though.
We want our elements to be displayed below each other.
For this, in our code,
we just have to change the flex direction property here
to column.
With this in place, if we check it again,
well yeah, still not there,
but we have the first span on top,
the second one below,
and the third one, well, at the bottom.
What's missing here of course, is another property
we've used a lot throughout this course,
it's to justify content property,
to define how the space between our elements
inside our flex container,
so inside this container here,
should be used.
There, I'll do this a bit faster now,
as we know how this works,
we can use to justify content property as I said,
and this time I'll go with space around here
so to distribute the space around each element evenly
and with this in place.
Yeah, I think this looks good now.
This is our clickable hamburger icon,
our hamburger button.
So this is task one solved.
The next tasks now are two and three.
So if we click the button,
the side drawer should open.
If we click it again,
it should disappear.