So let's now dive
into mobile and desktop styles
for the navigation area and for this overall website.
But at the moment,
that means that we have to work on the navigation area.
At the moment,
we got styles that look good on desktop screens,
but of course there, we want to hide this button,
this burger button,
and we want to hide the mobile menu here.
Now it is often a good idea to build websites
in a mobile-first approach,
which means you want to focus on users on mobile devices
since a lot of websites have primarily visitors
using mobile devices,
and you then want to optimize for desktop thereafter.
Now it always depends on the user base
of the website you are building,
but here I will actually build it mobile-first,
which means I wanted to find some base styles
which do work on mobile screens
and maybe also desktop screens,
and then I'll add a media query,
you learned about media queries in this course,
that only applies to desktop screen sizes.
Now, a media query is added with the @media keyword,
and then you can add a condition like
min-width: 48rem,
or a value in pixels, that would work as well.
With that, we ensure that only on screens
that have this width,
the styles that are defined inside this media query
will become active.
So the rules in there will only become active
on large screens.
Therefore, it's in here where I now want
to target my #mobile-menu-btn,
which is this hamburger button,
to then set display to none, on it,
which hides it, so that on large screens, it's hidden.
So if I save this, it's gone,
and therefore this navigation looks quite good
on desktop devices now.
Of course, we also want to hide the aside.
So the mobile menu,
the element with this ID.
So also in here, instead of this media query,
I'll target #mobile-menu, this aside element,
and set display to none for that as well
so that this is also hidden on large screens.
So for now, reload, that is gone.
And therefore the desktop navigation doesn't look too bad.
I just also want to tweak my navigation items a little bit.
So I'll target my anchor elements in .nav-items
and set specific hover styles and active styles
that I want to have here for those nav items.
And I'll set that to background color
var(--color-primary-500-bg).
That's a specific variable, CSS variable,
I defined in the base CSS file earlier.
And I'll also copy that
to set up some styles without hovering active,
so to just target anchor elements in .nav-items
on big screens,
and add a little bit of padding
so that this background color hover effect looks good.
And here I'll then add some padding
top and bottom of (--space-2),
and left and right of (--space-4).
And I'll give that a border radius of...
(--border-radius-small).
So these are additional styles
I want to apply on big screens.
There for now, this looks quite decent.
Now let's view this on mobile devices.
And for this, we can open the developer tools,
click this toggle device toolbar button here in Chrome,
and then choose a mobile device
on which we want to preview this, like the Pixel 2 device,
for example.
If we do that, and I increase this a little bit,
then we see that there, of course, this looks horrible.
On a mobile device,
I want to get rid of the navigation items here,
in the main header,
and the mobile overlay menu should look differently.
We also might want to fix the overall header
so that we can always see the header on mobile screens,
even if we scroll on pages with more content.
So there's a bunch of work we have to do there.
For this, first of all, I'll go to navigation.css
and go to my main header and add "position: fixed" here,
and then add "top: 0; left: 0;"
to fix this header in the top left corner
so that it doesn't scroll away
if we scroll on pages with more content.
So for now, I'll save this.
The only difference we see here
is that some content slid beneath it,
which is not my goal here.
And therefore,
I will also make sure that I target the main element,
which holds my main page content,
and that there I add a margin-top of 6rem,
which is the height of the header:
5rem, plus 1rem of extra spacing
so that this main content is pushed down.
Because as you learned,
if you add "position: fixed" to an element,
it's taken out of the document flow,
which is why the content would slide beneath it,
and that's not what I want here,
so I pushed the content
that would otherwise go beneath the header
down by 6rem so that this overall looks good.
Of course, main {margin-top: 6rem;}
should only apply on mobile devices, though.
Hence, I'll copy that rule and add it in my media query.
And there, I will set margin-top to 0
so that on desktop screens, I don't push the content down
because there, the header will not be fixed.
Or, at least, it should not be fixed.
At the moment, it would be
because I set "position: fixed" here on #main-header.
I now want to overwrite that on bigger screens.
So back in the media query,
here, we now also have to target #main-header like this
and set position here to static, like that.
Now that's one thing.
Now, as I mentioned, on small screens,
I want to get rid of these navigation items
here in the header.
Therefore, we have to actually target
our #main-header nav elements.
So the nav element inside of #main-header,
which is that nav element I want to hide,
this nav element, I'm targeting this,
this has to be hidden on small screens
because there I have the dedicated mobile menu,
which will be shown if this button is clicked.
And hence, here, for #main-header nav,
I'll set this to "display: none,"
which is the default,
but which of course should be overwritten on large screens.
So again, we copied this rule,
and here in the media query,
I'll set this to block instead
so that on large screens, this is shown,
on small screens, it's hidden.
Hence if I saved it and reload, the items are gone,
but if I switch to the regular size, I can see them again.
So that is good and working.
Now, of course, we want to work on that mobile menu.
And of course,
it should be toggled when this button is clicked,
but for a start, I will always show it
so that we can work on styling it
before we then work on the toggling logic in a second step.
Now this means that, outside of the media query,
maybe right before it,
the exact position doesn't matter,
we work on the mobile menu.
So on the element with that ID, because that is this aside.
This aside has "mobile-menu" as an ID.
So in here, we can then set this position to
fixed, as well,
so that if we would scroll,
we can scroll away because this should act as an overlay,
which is always on top of all the content
until you close it.
That's why it should scroll with you
if you try to scroll away from it.
And top will be 5rem here.
5rem because that is the height of the header here.
And that should, of course,
always be on top of that mobile overlay
so that we can always see the header
because there on the header,
we also got the button to close the mobile menu.
That's why I have "top: 5rem,"
but I'll have "left: 0"
because it should sit on the left edge of the screen.
And the height, then, will be a calculated height,
which can be done with the calc() function in CSS,
which is a built-in function
for calculating a size dynamically.
And here, I want a calc(100vh),
which is a special unit, which stands for viewport height,
which is the total available height of the screen,
minus the 5rem height of the header.
So that is then the height of that mobile menu,
and the width will be 100% to take the full width
of the parent element,
which in this case would be the body,
which would have the width of the viewport, in this case.
Then, I'll give it a background color of
var(--color-gray-700),
so a dark gray color,
and I'll set display to flex here,
and give this a flex-direction of column,
and add "align-items: center"
so that the nav element in the aside is centered
horizontally.
Horizontally, because I set flex-direction to column
so the cross axis is now left-to-right,
and there, I want to center this
so that it looks like this.
Now, we're not done.
I also want to change the styling of the nav items.
For this, we can target #mobile-menu,
and then target the nav element in there,
which holds all the nav items,
so which holds that unordered list.
And I'll give this a height of 20rem here,
a width of 90% so that we have some space to left and right
inside of that mobile menu,
and give it a margin,
and then have some margin to top and bottom,
let's say (--space-4), which is 1rem,
and auto left and right to center it
since I have only 90% width.
Now with that, that looks like this.
And now it's time to also work on the individual items
in the mobile menu.
For this, of course, I can target my nav items again
because, keep in mind in header.ejs,
we have the nav element, and there we include the nav items,
the same nav items as in the main header,
and nav items is this unordered list
with list items inside of it.
Now I want to change these default styles
to look good on a mobile screen
and then overwrite them appropriately
for bigger screens later.
So here I want to have "display: flex,"
and I want to have "align-items: center,"
but I'll set flex-direction to column as a default,
so to order these items from top to bottom,
and set justify-content to space-around
to have some spacing between those items.
Now, for that spacing to apply,
I will also give this a height of 100% so that .nav-items,
this unordered list inside of the nav element,
has 100% of the height of the surrounding nav element.
And that surrounding nav element
is the element we just worked on,
has a height of 20rem.
So the nav items will then be distributed
within that height with space around them.
That's the look I'm achieving here.
Now, I want to make the nav item text
a little bit bigger in the mobile menu,
hence, here, I'll target #mobile-menu .nav-items a,
so my anchor element's in there,
and I'll set the font size to 1.75rem,
and actually,
I also want to change that font size for the logout button,
so I will also target the button in there,
and I'll change the color to
var(--color-primary-100)
to have a brighter version of that primary color.
With that, this is what my items look like
on a mobile device.
This is what they look like on a desktop device.
And here,
the flexbox styling is now broken on a desktop device
because I did now set flex-direction to column
here for .nav-items.
So what we need to do here
is overwrite that for large screens again.
Here, in my media query for large screens,
I will target my .nav-items
and set flex-direction to row again
so that on big screens, we have a flex-direction of row,
so now this looks good on big screens
and also on smaller screens.
And with that, this is slowly taking shape.
Of course,
I want to make sure that the logout button also looks good.
So if I do log in real quick here,
like that,
this button doesn't look the way it should look like.
So let's work on the logout button styling now.
For that, back in navigation.css,
outside of the media query,
so my general default style
that should apply on mobile screens
and then, of course, also as a default on bigger screens,
unless we override it,
will be defined, let's say, here,
after .nav-items li,
before I dive into the mobile menu parts.
Here, I will target .nav-items button.
So all the buttons in my .nav-items unordered list,
and I only have one button in there,
which is my logout button,
and there, I'll give that a cursor of pointer
to have a nice pointer when we hover over it,
because we have that button on non-mobile screens as well.
So there, I definitely want to have that look
when I hover over it.
I'll set font to inherit
to use the font family I set up as a default.
I'll remove the border which I have here, or to be precise,
I'll set the border to a different value than the default.
I want to have a one-pixel solid border
with the color of
var(--color-primary-500).
So that default primary color was used a lot.
Set the background color to transparent
to have no background color,
so to overwrite the default background color.
And I will set the padding
to var(--space-2), top and bottom.
So a little bit of padding, top and bottom,
and more padding with (-space-4) to left and right.
And, I will also give it a border radius,
maybe after defining the border here,
which is var(--border-radius-small).
With that, that's how my logout button looks like.
I think we can improve the color.
So let's actually go there
and give this a color
of var(--color-primary-500),
like that.
But with that,
this is my logout button,
and on a mobile screen, it looks like this.
Now actually, that's not entirely the look I'd want.
So I think we should definitely increase the padding,
but I just noticed the padding was off
because I had a typo here.
I forgot a dash on the second variable here.
So that should be (--space-4).
With that, this looks better,
but of course the border colors should be different here.
And keep in mind, we're building this mobile-first,
so the default styles should be for mobile.
So therefore, here in that default style,
I will actually change the border color
to have that same color as I use
for the text of my menu items here as a default.
And that text,
that's the color I set here for .nav-items a,
and the .nav-items button,
so for the button, the text color,
that is (--color-primary-100).
So, for the button,
which I'm explicitly targeting like this,
I'll set the border color to (--color-primary-100),
and actually the text color should be removed here
because I'm setting that further down anyways.
I'm setting that here with these rules,
with this rule, with this selector specifically.
I'm setting this color.
So therefore now, that looks good on a mobile screen.
On a non-mobile screen, of course,
I'm not too happy with it.
There, I now lost my color, and the border color is off,
and therefore,
it's time for another media query-specific style again,
where we, for example,
go here and target the button in my .nav-items
to give it a color of var(--color-primary-500)
to have that darker orange,
and to change the border color
to that same color, like this.
And with that, if I reload,
that is my logout button on a desktop screen;
that is the button on a mobile screen.
And that looks way better.
I got no hover effect.
You could add one for the logout button.
I'm fine without one.
I got hover effects for the other items.
And with that,
I am actually quite happy with the look of this.
Now, the next step is to ensure
that we don't always see that mobile menu
when on a mobile device, but that instead,
this is only shown if you click this button,
and it's hidden if we click the button again.