Have over here throughout all our website so we will do that in this video so let's get started [Music] now first of all let me just fix some.
Issues that we have over here so if I just zoom out a little bit here we can see that we have this margin left now for larger screens we have this margin left over here and uh it was set by the.
Theme itself it was for the sidebar that we had over here in the theme itself but we had hidden it so now let's go ahead and remove this margin left so let's right click and and go to.
Inspect and let's see where is uh the margin setup so the margin is set up for the class page body so here you can see we have a margin left of 284 pixels and it is for this uh main width of 1,440.
Zero and let's update this let's go back to our page and reload and now we can see that we don't have the margin left so it is looking all right now let's take a look at the.
Mobile version so this is how the mobile version looks and for the mobile version also we have some margin left over here so let's see how to fix that let's right.
Click over here and go to inspect and let's take a look at the division that has the margin left so here for main with a class of centered bottom we have some margin left.
So here you can see we have this margin of 032 pixels so let's target this centered bottom division so here I'll just type centered bottom and uh let's set.
The margin to zero and let's see whether it works let's update this let's go back to our page and reload and now we can see that.
Posts Related:
- SharePoint Online Site Manager Beginner Tutorial
- Cara Mengembalikan File Data yang Hilang Terhapus Terformat dari FlashDisk dan Harddisk PowerPoint
- Create Your Own Job Application Manager With 1 Click Cover Letter Generator In Excel Free Download! Office
We don't have the margin and everything
Is looking all right all right now let's start our main task which is uh making this nav bar the default nav bar of our website so for that we need to move the.Code that we have for the nav bar from this page to the theme code so let's do that first of all Let's uh go back to the theme and let's click on this arrow and let's click on edit.
HTML now here's the code of your entire theme now before making any changes is make sure to copy everything and paste it somewhere for a backup right now let's go to one of the pages and uh.
Let's take a look at the structure of the nav bar so let's right click over here and go to inspect and uh here we can see that we have this header and it contains the nav.
Bar so we need to remove this header from here and we need to replace it with the Navar bar so let's search for the header we can just press command F orrf if you're.
Using Windows and let's search for header tag and this is the header tag and I'll just fold this and I'll just remove this header from.
Here and for now I'll just add an H1 and let's type custom header over here so that we can see that we are adding the code in the correct place so I'll just update.
This and let's go back to our website and reload and here we can see we have the custom header now let's go ahead and add our code for the nav bar in here so I'll.
Just go back to the dashboard let's go to our page and let's go ahead and copy the HTML of the nav bar so it starts from.
Here till the end of the nav element so
Let's cut this from here and let's paste it over here I'll just replace this custom header with our nav bar right now the next thing we need.To do is we need to copy the Styles so here it starts from here so we have the now and uh let's copy all these Styles till I think till here and let's cut it from here and uh let's paste it in the.
CSS so let's scroll up and this is a CSS of the theme so let's scroll down and let's go to the end and here I'll just create a comment I just type custom.
CSS and let's paste the CSS over here and let's scroll down and let's see whether we have any more styles for the nav bar we can also cut this from here mobile menu and menu icon and paste it.
Over here and scroll down and we can cut this also from here and paste it right here and in the media we have some.
Styles so it is uh till here so I'll just copy this and uh paste it over here and end this C braces and I'll just delete these CSS properties from here.
And I think that's it so now let scroll down and let's take a look at the JavaScript so we need to copy this as well so let's copy this script tag from here I'll just cut it from here.
And let's scroll down and go to the end of our theme code and just before the body ends I'll just paste the script tag over here and I'll just go ahead and save.
This and let's see whether it works all right and let's go back to our website and reload and this is how it looks and we have some problems in The Styling let's.
Go to the homepage and and everything is looking all right over here so let's go back to another page and let's go to our HTML that we have so let's go to the start of.
The body and it is somewhere over here so here we can see that we have this my container and we need to copy the styles of my container to our theme code it is right now in our.
Page so let's copy the styles of my container so it is right here so I'll just cut it from here and uh let's go to the CSS and let's paste it over here and if you.
Go back to our CSS of the page here we can see that we also have this uh CSS variables so let's also cut this from here and paste it somewhere over here and uh I'll also cut this box.
Sizing border box from here and paste it right here let's update this and let's see whether we have any problems right now so let's reload this page and now we can see we have some improvements let's.
Also fix the color of this text so let's go back and uh let's target the anchor tags of the nav so let's tap nav a and let's set the color of the text to.
Black and uh we'll also set the font size to 16 pixels and let's also add a z index to this uh nav bar because right now it is going under the other.
Elements so for the nav let's tab Z index and let's set it to 500 and let's also set the font family to enter Because that's the default font over here so let's tap enter Sans.
Serif and let's also go ahead and uh cut this import font line from here and let's paste it over here so I'll just paste it at the start.
Of the CSS I'll just paste it over here and let's save this let's go back to our page and reload right now the last thing we need to do is we need to change the font size.
Of this logo so let's go back and uh let's target the logo so for for the logo we have this division with the class of logo and in that we have the anchor.
Tag so let's type nav logo a and let's set the font size to 24 pixels and font weight to bold and let's save this let's go back to our page and reload and now we can see everything.
Looks all right so let's go to the homepage and the homepage also has the correct Style so with that we have created our common Navar for the whole.
Website so that's basically it for this video if you have any doubts you can ask in the comments below and if you like this video please click on the like button and subscribe to this channel to.
