(Maximillian)So let's now work on the styling
of this header and the navigation.
Now we have this header EJS file. And there, I,
first of all,
we'll add an ID to the header named main header,
which I will use for styling to uniquely identify this
header because we could have multiple header elements on the
page.
The header HTML element is not exclusively used for
navigation.
You can use it at the beginning of a section element as
well, for example,
to define some header information for that section.
And therefore I'll give it this unique identifier here.
I'll also give my logo a unique identifier so that we will
have a way of targeting this logo there
and we could add more identifiers here,
but for the moment that is it though,
I want to add more elements to this header because at the
moment I only have the logo and the NAV bar,
but I want to build a website that also works on mobile
devices and we'll learn how we can set up responsive
interfaces and UI's.
Now, actually thus far,
we already did make it quite responsive.
For example,
the login form works on smaller screens as well.
But for the navigation,
I want to make sure that we don't show all the options in
the navigation bar if we have a small screen,
but that we instead have a mobile menu,
which we can open with such a hamburger button,
such a button with three bars in the navigation bar,
which we can press to open that mobile menu overlay.
That's my solution for mobile screens.
And therefore we should add such a button,
such a hamburger button, so to say, in the header,
hence here in the header, after NAV,
I will add a button and this button will get an ID of
mobile menu button,
because it will be responsible for toggling the mobile menu.
Now in there,
I'll add free spans because these will be the free bars
which I want to have in that button to have this typical
menu button, look, this hamburger button look.
Now we'll add the styling to make the button look
proper, together soon.
And that's very important in this header EJS file.
I also want to have to mobile menu itself.
I'll add it outside of the header.
As an aside element,
you could use a different HTML element as well,
but aside means that it's some side information,
some side content belonging to
the main area in which we use it.
And that is exactly what that mobile menu is.
It's not part of the main content.
It's just some extra content which is important
on this page.
In this case to provide mobile navigation.
In this mobile menu, I want to have a NAV item.
And in the NAV item,
I want to have exactly the same navigation structure as in
the main NAV item and the header.
And that main NAV item will only be visible
on non mobile screens
The NAV item in the side menu will be visible
on mobile screens.
So now to not just copy and paste all that logic,
I'll add a new include NAV dash items sounds like a fitting
name and in that include,
I want to have this unordered list full of navigation items.
So I will cut that from header EJS and add that to NAV items
EJS.
And then in header EJS we can include this.
So here I will include
header like this
and not header NAV items like this
here.
And do the same in the second
NAV block here in the aside.
And the, this aside,
we'll also get an idea of mobile menu because
that is what it is.
So that's the HTML structure.
Now we need to work on the styling.
And for that, for working on this styling,
I will actually add a navigation CSS file a
brand new CSS file,
which is exclusively responsible for all the navigation
related styles and in there I'll target
my main header by ID.
That's why I added to this main header ID here,
and we'll now set up some general styles for that,
and then we will work our way through all the different
elements that make up this main navigation.
Now for the main header,
I want that header to generally have a width of 100%,
especially on small screens,
but to have a max width of 60 REM.
So that on bigger screens,
it doesn't sit on the left and right address and take the
entire width, which can make the UI look really weird.
But that instead, on a large screen,
it has some limits after which it doesn't grow anymore.
All give it a margin of zero auto.
So no margin top and bottom,
but auto left and right to center it on larger screens
where the max with becomes active.
And before I do that,
actually I'll give it a height of five REM.
That should be a fixed height for this header here.
And of course, that should be clear,
but I'm still saying it feel free to experiment with those
styles and come up with your own styles. It's your project.
It's your practice definitely style it the way you want.
These are just the styles I came up with ahead of time.
And therefore the styles I will use here.
Now, we'll also add some padding,
but I don't want any padding top and bottom instead just
left and right.
And here all simply add space six as a padding to left and
right, and zero top and bottom,
and then add display flex so that I can position the items,
the logo, the NAV bar,
and the hamburger button with Flexbox inside of this header.
And I'll add justify content space between so that I push
all the content to the left and right address of the header
and the mobile menu button is pushed to the right since it's
the last element in there.
And the logo is pushed to the left since it's the first
element in there.
And then I will set a line items to center so that on the
cross axis, so vertically by default,
we center all these items so that they're on the same level
centered vertically.
I will also add a border bottom here of one pixels solid.
And then here all use one of my predefined CSS variables
in this case color primary 500.
And I'll give the header a background color of color,
gray 500.
With that, we now need to include this navigation CSS file
into our pages to see an effect.
And since the header is on every screen,
these styles should be applied to every screen.
And hence we could've added those styles into the base
CSS file, of course.
I'm just splitting them into a new file so that we have an
easier time finding the navigation specific styles if we
ever want to change them.
So it's just for clean code organization purposes.
We want those styles on every page so we could add them to
base CSS theoretically, but for the reasons mentioned,
I put them into their own file,
but since I want them on every page, I'll go to head.
EJS where we also are including base CSS already.
And this will be used on every page. So here,
I then also include navigation CSS.
With that it's included on every page now.
And if we now reload, this,
this our header. Not finished,
but we can see Flexbox having an effect and to the border on
the bottom, having an effect.
Now there's more work to be done.
Let's continue with the logo.
I'll start by targeting the logo and then the anchor tag in
there,
because we do have an anchor tag in our logo here.
And here, I want to set the font weight to bold
and change the font size to make the logo stand out
a bit.
Like this.
Now the logo is a bit more prominent.
Next. I want to work on my NAV items.
So on the unordered list here.
And for this, actually I'll give that unordered list
and the NAV items EJS fall a class of NAV items,
and I'm using a class here because we're using this
unordered list twice, in the header and in the aside.
I'm including it twice,
and hence we shouldn't use an ID because IDs should be
unique.
Though, of course we could argue that later
we'll only see one of the two on the screen at the same
time. So, actually you could also go for an ID,
but I'll go for a clause here, NAV items.
And in navigation, CSS,
we can now target NAV items like this.
And there, I want to set this to display flex as well,
so that all the list items in an unordered list are also
positioned in a row.
And I'll add a line item center here to center them
vertically.
So now these are sitting next to each other
also here in the aside.
And of course, we'll make sure that we only see either of
the two, depending on the screen size in a
in a little while as well.
For the moment, I'll just focus on styling
the parts up here appropriately.
So next let's work on that mobile menu button,
which we have in the header.
So this button with the free spans inside of it,
and this button has an ID of mobile menu button.
So we can use that ID to select it like this.
And then here I will set this to display flex,
but set the flex direction to column,
because here I now want to organize these free bars
from top to bottom, not from left to right, so not in a row,
but in a column.
I'll set justify content to space around so
that there is some evenly distributed space around
these bars.
And I'll set the border to non.
I'll set the cursor to pointer. for this button
even though on a mobile screen,
we typically don't hover over it because we have a touch
interface and we don't see that effect,
but still I'll set it to pointer here.
I'll give it a width of 2.25 REM, and give it
a height of 2.25 REM.
And now we, of course all's need to style the spans in there
appropriately.
So all the target,
the spans inside of such a mobile menu button and all those
spans will have to same width, and then a height of,
let's say .2 REM
and a background color of var color gray 100,
which is a pretty white ish, gray tone.
With that, if I reload, this looks almost good.
I want to get rid of the background color though.
So I'll set that to transparent so that we have no
background color and I'll remove any padding we might have.
And with that, this is my mobile menu button.
Which at the moment doesn't do anything,
but it's there at least.
Now, of course these navigation items are a little bit
too close to each other. So we want to change that for sure.
Hence what I'll do there is I'll go back to my NAV items and
select all the list items in there.
And we wouldn't have to do that here.
We could also do that after defining the mobile menu button,
related styles.
I just like to keep related style definitions close
to each other, since that makes maintaining that code
and working with the code a bit easier in my experience.
So after working on the NAV items styles,
I'll work on the styles of the list items in the
NAV items.
And here I in the end,
just want to make sure that we add a little bit of margin to
left and right,
let's say of VAR space two left and right, zero top and
bottom.
And with that all being done this now clearly looks better.
Now this is some base styling.
Now we definitely want to adjust this for differentiation
between mobile and desktop devices.
For example, on desktop devices.
I don't want that hamburger button.
I just want the logo and these navigation items.
On a mobile device, on the other hand,
I don't want these navigation items here in the header.
I just want to have to mobile menu button instead
and the logo.
And I want to have that mobile overview with nicely styled
navigation items, if that hamburger button is pressed
so that differentiation and making that hamburger button
work, that's what we'll work on next.