So now what I'm going to do is that I'm going to show you that you can add these these two buttons,
these two icons in the same in the same ally.
So instead of adding each one in a separate now item, you can add both together.
So let me show you what I'm going to do so you can copy this and replace it in the same in the same
nav bar icon in the same number item, and then remove this.
And now it's going to be displayed like this.
So I think this is better because now we have here a much bigger space, but we still need to work on
a design.
But you can also do this.
So you can use the first method or this method.
Also the shopping cart.
You can use the shopping cart or you can use the shopping bag.
The shopping bag is going to display your shopping bag.
So as you can see back about like this, another thing I'm going to do is that.
I am going to make this navigation bar fixed, meaning that if you scroll, I want this navigation bar
to remain at the top of the screen always so that the user will always be able to check this navigation
bar and click on any button if they want, even if they scroll.
To do this, you can use a class plus called Fixed Top.
So here if you say fixed top.
This is going to make this navigation bar stick to the top of the screen.
Another thing that I'm going to do is that I'm going to increase the height of this navigation bar,
and there are so many options to do this.
The easiest option is to use the py3 that the Y is the margin is the padding is the padding y which
is height and the padding top and bottom.
You can increase this all the way to you can increase this all the way to five.
So you can say you slice.
Five is going to increase it further.
But of course, five is too large.
I'm going to say three.
Three is enough.
I think three is enough.
So this is for the navigation bar.
And another thing the thing that I'm going to do is that instead of displaying playing off bar, I'm
going to remove this navigation bar.
I'm going to remove this nav bar.
And instead I'm going to use an image.
I'm going to display the icon, the logo of the website.
So I'm going to say image and then sauce.
And then the sauce is going to be equal to double courts and then assets for slash images for slash
and then logo that g big.
However, I don't have I don't have a an image called logo that so we need to add a in the images is
going to add a a a logo to this folder and I'm going to do that later.
But for now, I'm just going to say assets.
Image.
Images.
Logo.
JP So the name of the image is going to be JP.
Leave me now.
Work on this style a little bit.
So I'm going to open up the.
Style here, the style.
Let's use this.
And then I'm going to add the following designs.
I'm going to have the general designs.
So what are the general designs?
The general designs are the things that will be applied to the complete website, such as the designs
for the headers and designs for titles and things like that.
First I'm going to say here dot nav buttons, and then I'm going to add enough buttons class to the
do this to this.
Therefore, I'm going to say here now buttons.
And then what I'm going to do is that I'm going to increase the margin left.
I'm going to say margin margin left.
So the margin left is going to be 160%.
And the reason why I'm doing this is because I want to push this nav bar refresh and show you what's
going to happen.
I want to push this now back to the right side.
So this is how it's going to look like.
I'm going to be displaying this balance on the right side.
Let me decrease this a little.
So instead of instead of 60, I'm going to say 5050 is enough.
I think so.
50 will display like this and you can.
Here.
Let's let's say 60 because I think 60 is great.
So 60 will be great.
Now what I'm going to do.
Is that?
I'm going to add some designs to the complete beach.
So for the complete site, I'm going to add the following.
First, the margin is going to be zero.
If adding is going to be zero and the box sizing is going to be border box.
Border box.
Next, I'm going to change the buy of the website so the body will have a font.
Family.
And then I'm going to for that phone trauma right now from Google.
So you can head on over to Google, click on first.
You need to go to fonts that Google Google.com.
And then you can select your the the fonts that you want, the font that I'm going to be using here.
It's called.
Open.
Poppins.
It's called Poppins.
So I'm going to click on it and then I'm going to select it.
And then in order to import that font, what you need to do is that you need to click on select this
style, and then here you will find link and import.
I'm going to click on import and then you need to copy this part, this part, and then you need to
put it back in your project at the top, in the style you need to visit here and then here, the font
family is going to be equal to the Poppins.
So I'm going to say here, Poppins.
But make sure that this spelling is correct Poppins and then comma and then there.
So this is for the family of the complete --.
Next, I'm going to work on the one.
I'm going to change this one.
So I'm going to change the font size and the font weight for each one, two and three and four and five
and even six.
So I'm going to see font size for each one.
The font size is going to be 2.5 RTM, whereas the font from 4 to 8 different ways weight is going to
be seven hundreds.
I'm going to also change the use of all two.
I'm going to say font size 1.9 rtm whereas the font weight.
Is going to be six hundreds.
And then I'm going to copy this and I'm going to sit here and here and here.
So for each three, I'm going to say here it's three.
For the three, the font, the font size is going to be 1.5 and the font weight is going to be a time
great for age, for the font size is going to be 1.2 and the font weight is 600 and then for each five.
The.
I'm going to change the font size to be one.
And we want to wait.
Is going to be 400.
And four inch six.
I'm just going to change the color.
I'm going to say color.
Then I'm going to change the color to this color.
I'm going to be using a color that's close to the white color.
I'm going to say the eight.
The eight, the eight.
So this is for for this part.
Next, what I'm going to do is that I'm going to work on the this part.
I'm going to work on it because this we no longer need this.
I'm going to work on the body of our website.