Alright, welcome back guys. Now let's make our header. Okay. So from our dashboard, go here and visit site. Now click on Customize. Now first of all go to general options.

Okay. And here go to gentle styling. Now, T is the primary color to green. Okay. which is this one? Yeah, as you can see, our basket color is green now.

And our primary color let's make it a darker shade of green. Yeah. Okay. Now let's go back now and go to header. General and change the style to medium Alright, as you can see, we have the layout that we want now. All right, now scroll down and click on Add transparent header.

Okay, now the header is transparent. Let's scroll down. Make sure the position menu position is center and height is 39. All right, and the item patterns are 22 and 22 from right or left. Okay. Let's scroll down now, go to search form and and change the input background color to transparent.

All right, and the button hover color change it to green. Yeah. Now let's see. Now you can see the the magnifying glass turns green when I hover over it, or right now let's go back to our header media. We don't need to put anything here. Let's go back logo, select our logo upload, upload the logo, it's in the resources file.

Okay, so here is our logo, let me select it and skip cropping. Okay. Now make sure the maximum width is 90. All right. Now let's go back and go to social menu and enable social menu. Okay, now let's scroll down and as you can see we have the we have all this area to put the social links in.

So whatever your Twitter handle is you can put it here for now let me just put a hashtag. And for Facebook also hashtag and Pinterest. Hashtag you can add as many as you like all everything is here. Okay. Now, let's change the color of the social links. So go here as social Color, change it to black.

As you can see they are black now. All right. Okay, let's publish this. Now go to mobile view, okay, and click on menu. As you can see we have the menu like this, we can change it by going into going here into the mobile menu. Okay, let's click on it and mobile menu style.

Let's see, let's change it to full screen. All right, now it looks like this. Okay, let's see our color now. Links color. So let's make it green. Yeah.

All right. Now let's publish this and go back to the desktop view. Cool. Now let's go back. Okay, as you can see, we have two search, magnifying glasses here and we don't need this one and to read Move that go to header menu. Okay, and scroll down.

Yeah, search icon and make it disabled. All right, it's gone. Let's go back and publish. Now we need to fix our search form here. Okay. And to do that, let's hide these controls for now, we need a border at the bottom of this search form.

As you can see, we have a border at the bottom of the search form. To do that, what we need to do is right click on it and inspect element. All right, now come here. Now this thing will open up Okay, so in the filter styles, scroll down and in this first section here, go to border and type border. Bottom. Okay, I'm using Firefox so this it automatically, it automatically shows me the CSS value CSS commands that are available.

Okay, now border bottom let's make it one pixel wide. One px, one PX and then types solid. Alright, as you can see we have the border now. Now let's scroll down. Okay, here, let's remove this one. All right, and make it transparent and nothing happened.

Border radius Oh yeah, it's from here. Okay, so, what I did is I right clicked on it, inspect element, okay. Then it comes here, under the site header, medium, dash header, hashtag medium dash. search form input scroll down search for a border and after the border type dash bottom then one pixels solid Alright, now scroll down huh yeah now scroll down and find and find this border radius and make it zero pixels All right. After you do that, copy everything from here till here and copy all right, close this and close this Okay, we have nothing here. Now again go back to customizer.

Okay here go to custom CSS j s and paste everything here. All right. Now as you can see it is showing a CSS error. So let's fix that. Scroll down. Okay, we don't need the transition stuff.

Let's remove all this. We need the border radius to be zero pixels. All right. Okay, and I think we need to close it. Yeah. And remove all this data we don't need.

All right, and publish. What I did there is i right clicked here and inspect element. So this shows the site is the. So this shows the contents and the CSS of our web page. Okay, so towards the left, the site is the HTML, which is the content and this site is the CSS, which is the style of that content. So what I did is I selected this search form, okay.

And it took me To the content, then, when I selected the content, it showed me all the CSS properties. Alright? And I modified these properties as per i liked, okay, you can actually do this for any of the web pages you like, you can even change the Google page. Okay, so Inspect Element, and let me select this logo. Okay. And let me change the padding to 1090.

Okay, as you can see, it's, it has gone down like it has gone 1090 pixels below from the top of this web page. So you can modify any web page on the internet this way. But obviously, this is a temporary thing just for you to play around. When I refresh this, it goes back to how it was okay, this way. This you can use this method to modify the web page as per your liking and then Copy the CSS and come back to your theme options into Custom CSS and paste everything here. All right, now our header is done.

So in the next video, let's move on to the body. Okay and we will start with the hero section. So I will see you there. Bye