And when it comes to CSS, we want to navigate to our assets.
And rappers, and we're looking for nav bar DJs.
Let's remove all of this code.
Notice how we're returning a now.
So that's the main element.
We want to start by setting up some kind of height.
And this is going to be equal to our now height.
So we're going to go here with nav hyphen.
All right, let's set up the semicolon, and then we want to go display and flex.
Now, please keep in mind one very important thing.
Whenever we're talking about the flex, we're talking about the nav and nav center.
So in the nav bar we have the nav center and we use this div to pretty much place everything in the
center.
So we just apply the Flexbox to place the actual nav center in the center.
Hopefully that is clear.
And back in the nav bar we want to go with align items which again is going to place it in the center
vertically in this case and then justify content.
And also we'll place it in the center.
And once our main div is in the center, then let's also add the box shadow.
And we'll set it equal to zero.
One pixel zero zero Rgba.
So black color.
And the opacity is going to be 0.1.
So basically I'm talking about this one over here.
This line in the bottom.
So notice our nav center is placed vertically and horizontally in the center.
Correct.
And let's also add some background to the nav element.
And again, this is going to be equal to hyphen hyphen background.
And we're going to be looking for secondary color.
Why do we want to set this one?
Because, again, there's going to be a dark mode and we'll need multiple values, which we're going
to toggle between the modes.
Then let's go with the nav center finally.
So in this case, we want to go with display.
We'll set it equal to display flex.
So notice now we have all of them in one line.
We're going to go with some kind of width and we're going to set it equal to 90% of the screen.
Then let's align everything in the center.
So align items and let's set it equal to center, and then let's go justify.
Content and we're going to go with space.
Between.
Let's save it.
And now check it out.
So we have over here the toggle button.
And here we have a logo with the text.
So depending on the screen will display one of them.
And then we have the toggle and logout.
Something we're going to set up a little bit later.
And I guess let's just set up the toggle button.
Let's start with background.
We're actually going to set it equal to transparent.
Then border color is also going to be transparent.
So same deal.
Then we want to increase the font size.
And we're going to set it equal to 1.75 Rems.
Then we want to set up a color.
In this case, we're going to go with primary 500.
So we're looking for Var, then primary and we'll set it equal to 500.
Okay, good.
And then cursor pointer.
So once we hover, we want the cursor.
And also since we have a button and then the actual.
Icon is inside of the button.
We want to set button as flex parent.
How is that going to look like?
Well, we're going to go over here and we'll say display flex and we're just going to align everything
in the center.
So therefore, we'll go with align items and set it equal to center.
Then we want to go with the logo text.
So that's the dashboard text and by default we'll hide it and we'll only display it on a big screen.
Again, the reason why we want to do that because on the.
Big sidebar, there is already a logo.
Then the BTN container is also going to be display flex and we'll align everything in the center vertically.
So we're going to go over here.
BTN container and display Flex.
Please keep in mind that of course at the moment we just have a text.
Eventually we'll have more things in there.
So align items and let's set it equal to center and let's also apply some styles to the logo.
We want to start with display flex align items again center.
So pretty much the big deal here is that since we have tons of small elements, we want to make sure
that all of them are sitting in the center vertically and therefore we're going to go with align items
center and then at the very end we're going to go with width and that is going to be equal to 100 pixels.
And once we have the setup in place for the small screen, we also want to apply the styles to the big
screen and if you remember, there was a media query on a dashboard which effectively set the two column
layout at 992, and we want to repeat that.
We want to go with min width 992 and the first thing we want to do is set up the position to be sticky.
What's the reason?
Well, if we take a look at the complete project, notice how.
There might be some additional content.
And as we're scrolling effectively, I just want to display that nav bar.
So if we don't add that style, then essentially it will just scroll away and that's not my preference.
Then also we need to provide the position and for that we're going to go with top and zero.
Then let's set up the nav center equals to 90%, just like we have for the dashboard page.
So nav center instead of 90% of the screen width.
Now it's going to be 90% of the parent.
So we're going to go over here with 90%.
So width, 90%.
And then remember logo we want to hide.
So we just target the class logo and then we say, here, display.
Equals to none.
And then when it comes to logo text, that's when we will display it.
So I'll just copy and paste that thing and I'll say logo text.
Instead of displaying none, we're going to go with display block.
And at the very end, you know what I noticed?
I have a bug.
So these are not located in the media.
Let me cut it out and let's place it after the top one.
So now everything is correct because previously I just added them as a styles for small screen.
So now let's check it out.
I'm going to navigate to this browser tab and notice what we have.
So this is going to be the look on the small screen.
We have the toggle button, the logo, as well as toggle and logout, something we're going to set up
a little bit later.
And then once we get to the big screen notice, we change from logo to this text.
Over here.
And then we have the big sidebar.
As I note, you won't be able to see.
Position sticky in action since all of our pages just have heading one again.
If you want to see it in action, go to complete project.
More specifically, go to all jobs and there you'll see that pretty much the.
NAV bar stays on top of the screen and that's what we control with this position.
Sticky.