This is the current state
of the mobile view of our website.
So the header only consists of the web food logo.
To implement the mobile design, as intended,
we have to follow three crucial steps.
Step one is the creation and implementation
of a clickable hamburger button
or hamburger icon in the mobile view.
It's called hamburger because it consists
of three horizontal lines,
which kind of look like a hamburger with the bun
and then the meat inside.
So this is where this name is coming from.
This is nothing new actually from a conceptual perspective.
We just need a container which will contain three elements.
Spans are the elements we're going to use,
which will be formatted to be of a white background color
to be able to represent this hamburger look.
This is step one.
So this button which should only be visible
in the mobile view of our website.
Step two is a bit more advanced.
Here we have to make sure
that once we click onto this button.
So if we do the first click,
then the so-called side drawer should open.
The side drawer is the highlighted part on the right side.
Now, as you see, the web food logo should also disappear,
but this is something we know already,
so nothing complicated here.
But we have to be able to kind of create this new look
if we click onto this hamburger button.
That's step two.
Step three will then be another click
onto this hamburger button
and with this click, the side drawer,
so these manual with the two navigation items,
should be closed and we should be back at the initial state.
Of course, if we click the button once again,
then the side drawer should open.
If I click it another time,
then it should be closed and so on.
This is what you want to implement in the next lectures.
Now to achieve this, we have two new topics
which we will discover.
The first topic are so-called internal links.
This does not mean links to other pages of our website.
We did this already throughout the course,
but links on the existing website,
on the existing page to be more precise.
Such links, just as links to other pages
of an existing website or links to other websites,
are added to the URL in the browser.
So we can define an ID on our anchor tag,
which is a link in the end,
and this ID will be added to the browser then.
This looks something like this.
We have a hyper reference with the ID added as an attribute.
Now you don't have to understand this fully at this stage.
It's just a theoretical introduction
to what we expect in these next lectures,
because besides being able to create such internal links,
we also have to define what should
be displayed once clicking onto this internal link.
This will also be something that we will discover
with the so-called target selector.
The target selector simply means that certain CSS rules,
which we defined, will be applied if the defined ID
is selected in the URL.
So if we click onto this internal link, then the URL changes
and with that we can change the styling
of specific parts of the website.
This is what the target selector will look like.
So we refer to the ID that we added
in the internal link and add colon target to it.
That's another pseudo selector here, by the way,
just as hover, which we know already throughout this course.
So this probably doesn't make too much sense
at the moment for you.
Therefore we have this three-step process
creating the icon or the button,
which is rather straight forward,
then making sure that once we click the button,
this new manual side drawer is opened.
And once we click it again, it is closed again.
All done by using the concepts of internal links
and of this target selector.
So let's start with the easier part
and that's the creation of the hamburger button.