Hello, welcome back.
Let's add some styling to the navigation menu now.
So we go back to base.html, and the first item is nav.
First of all, we want to select all
these and indent them, one and two.
So it should be indented under the body tag, right.
So we'll start with nav and class
equal to, I know some classes from
[Author Typing]
Bootstrap, and you can also find examples online.
So navbar, it specifies that this is a navbar.
So use the navbar styling,
[Author Typing]
navbar-light
[Author Typing]
for the color, and the background bg-light as well.
Have some shadow, and,
and then you also need to give,
so class is one property of nav.
And also after the quote, here you need to
give another id equal to mainNav like that.
So this is used by JavaScript of Bootstrap.
Then the next div, will have a class of collapse.
[Author Typing]
navbar-collapse.
So these are different classes, and an id of,
[Author Typing]
navbarResponsive.
Then we have the ul class.
[Author Typing]
navbar-nav ml-auto.
ml stands for margin left and its value will be auto.
And lastly, the li class is nav-item.
So this is an item of the menu and that's it.
Save that and see what will change.
Okay, not bad.
Now the a text. So the links don't look very nice, but
the bar itself looks good with a shadow.
So let's do, the styling of a text.
So a class equal to navbar-brand, save, reloads,
Home looks good, but About Us doesn't.
So let's do the same for
[Author Typing]
the other one.
Like that, yeah, it looks good.
Now, we need to put it a bit to the right and a
p-3 class, added to the first a tag, should work.
So save, refresh, and it goes more to the right.
So p-3 means that, give it a padding around that a
class, and you should do the same for the other ones.
So p-3, save, refresh.
So that is the navigation menu.
Now down here we want more space
between the navigation menu and this content.
Let's fix that.
I think that would work by
adding to the navigation element,
to the class of the navigation element,
we could add, an mb-3.
So mb stands for margin bottom,
[No Audio]
refresh and yeah, now it's better.
So there is some space now
under the menu, the navigation menu bar.
And that's about it.
I hope this makes sense and I'll talk to you later, thanks.