Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
FREELessons:12Length:1.9 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.2 Create the Main Header

We’ll now move on to our main header, which contains our logo, main menu, and contact number. Here we’ll see how to efficiently control our layout using Flexbox.

3.2 Create the Main Header

Welcome to back your Figma HTML. In this lesson, we're continuing on building out our headers. And we're gonna build out this main header here. And the reason I'm calling it the main header is this is the one that has the logo, the main navigation, and the phone number. All right, so let's start by adding in our basic HTML for this new header. We're going to keep this inside the main header element, because all three of these areas are part of the header for the site itself. It's okay to have multiple elements that comprise our overall header. So after our top header, we're going to add in a new DIV with the class just header by itself, just like we did up here. We're going to create another DIV inside with the class ina so that controls our alignment as we went through earlier. I'm actually going to grab this style sheet and put this over on the right so you can see both files that we're working on at the same time. So the first thing that we're gonna do in our styling for our header is just give it a fixed height. We know that we need this header to stay a particular height to accommodate this content here. And if we click on our header we can see that it's 100 pixels wide. And in ren values that works out as 6.25 ren in height. And there's nothing else we need to do in the header style for this specific class. It's already got a white background by default, so that part is good to go. So the next thing that we're gonna do is create three elements, one for each of the three pieces of content that we need to fit in here. So we've got our logo, our page menu, and our phone number. To accommodate those, let's make some space. We're gonna have a div with the class logo. We'll have another nav element with the class page menu, page_menu. And we'll have one more div with the class phone_number. All right, so now let's get some content into each of these elements. For the logo, even though we're calling it a logo, we don't need an image, this is just text written in the Roboto font. Where the first word has a bold weight, and the second word just has a light weight. So what we're gonna do is right-click and Copy as Text, paste that into our logo div, and then we're just gonna add in a span tag. By wrapping that span tag around the word knife, it's gonna give us something to target to apply two different weights to each of the words in this logo. So just add that in really quickly now. So first we'll target the logo class, we'll set a font size, and we can see here if we look at our font size, it's 24 pixels, and that translates to 1.5 ren. Now, let's also target, That nested span tag. And here is where we can apply a different font weight. If we look at the word knife here, double click to go and edit it. We can see the font weight is bold, so that means if we set that font weight to bold here, which is equivalent to setting it to 700. Now if we look at our preview, you can see we have the word knife in bold and the word travel in regular font weight. We actually want the word travel to be in a light font weight, so in our code here, for our regular logo text, let's set that font weight down to 300. So now that's much better. And then the next thing that we need to do with the logo is set the font colors for each of these portions of our logo. So the word knife uses this darker color here so let's go ahead and create another text color. Text color two and then we'll copy that variable, and we're gonna apply it to our logo span. So we're gonna say color, apply variable, and add dashes and paste in our color variable name. And they will do the same thing for this other color. Just grab that hex code. To find another color just use the same protocol, text_color_3. And then in the same way we're gonna apply that to the main logo. I'm just gonna place that there for now, So I can copy and paste this whole line in and then apply that new variable name. And if we look at our preview, we can see that that knife travel logo looks just like it does in Figma. All right, so next step let's add the HTML for our page menu. We've got five links here and one of them we're gonna style to look like a button. So to save time again, we can just copy this whole selection of HTML that we used before. Unindent it by highlighting the whole lot and pressing shift + tab, and then we can just go through and replace the text to match what's in our design. So you just go through and do that, and then you'll have this html. Now we need a way to differentiate this link here as being the one that needs to look like a button. The reason it needs to look like a button, or the reason that it needs to be highlighted is because we consider to be the active button. You're on the homepage so the home link is active. For that we're gonna add a class with the name active. All right, now to style up these links. First we're just going to style all the links with a default look. So we're going to target our page menu class and any A elements that are nested inside it. We can see by default the text color used here is the same as the text color that we were using earlier when we created our text color one variable. So we can just copy this line that sets text color one as the text colors for these links. Let's check on their font weight and font size. So the font weight is medium and the font size is 14 pixels. So we can set font weight 500 and font size to 0.875 ren, so that's coming together just fine so far, that's looking almost right. Don't worry about the fact that these are all aligned on the left side, we gonna fix that up with flex box a little bit later. Now I need to put some spacing around these items. So once again with one of these items selected can hold down Alt, and then hover over a nearby item. And that tells us that there needs to be 40 pixels of space in between each of these items. However, at the same time, we need to make sure that there's also some padding around these items. Because when the active class is applied to any one of these, we need to make sure that it can look like this button here. And if we scroll in, with this home text selected here, hold down Alt, and then hover to show us the amount of space around the inside of this button. We can see it needs to have 10 pixels of padding around the inside. So just a bit of quick maths on that, if we know we've got 40 pixels of space in between in this section here and we know that we have 10 pixels of padding around the inside. That means that we need to have a total of 30 actual pixels of space or margin in between those items. That margin is gonna be present on both sides which means in total we need to have 15 pixels of margin around these link items. So 10 pixels padding, 15 pixels margin. And if we convert those numbers to rems, we get 0.625 rim of padding, and our margin is 0.9375 rem. And now, the spacing is looking much, much better. Now, before we move on to adding that button styling, it's getting to be a little bit difficult to see that our spacing is working correctly with this menu sitting in an awkward position. We really need it to be sitting in the middle where it's supposed to be with the phone number off to the right. So what we're gonna do is just jump forward and put the phone number HTML in. Then we're going to get all three pieces of content aligned and then we're going to come back and finish off styling the menu. So, let's hit Shift+0 to zoom to 100% size. And I'm going Ctrl-click to select the phone number and right-click, Copy as Text. Now in here, the first thing that I wanna do is load up that phone SVG icon that we created earlier. So I'm gonna do that by adding in an image tag. We know that our images are all in our Images folder. So I'm just going to type out Images, hit forward slash, and that's gonna show us a list of our images. And from here we can select phoneicon.svg. We'll add in an alt tag, we'll just call it phone icon. Just collapse that again. So that is gonna load in the image that we exported earlier. Now I could just put the phone number just straight in here. But I wanna be able to target that phone number for styling. In this case, it's just to put a margin around it. But you never know if you might wanna add some extra styling later. So I'm actually going to create a set of span tags and then add the phone number in between those span tags. So there's our three pieces of content all still looking a little rough. But now let's get them aligned correctly in the header before we finish styling them. We're going to use Flexbox once again to position each of these three elements. And in order to do that, we need a container element that we can target our Flexbox code to. The parent element already has this class inner applied to it. But we don't want to apply our alignment code to this inner class or it'll affect every other time we use that class elsewhere in the site. So we gonna add a new class in here, I'm gonna call it header_inner. I'm gonna add that into our style sheet. We're gonna set display to flex. We're gonna use justify content again, like we did before with our first header. Only this time instead of setting it to flex in, we're gonna set it to space between. And what that will do is put an even amount of space in between each of the items and that will cause them to be evenly distributed across the header area. So we'll say justify content and then we'll find space between, so we'll see what we've got so far. All right, so that's done a really good job of distributing these three items. Now we also want them to be aligned to the vertical center of this area as well. We can do that with the property align items. Choose align items, and then we'll set that to center, so that took care of that. Now that we can see everything a little bit better, let's finish styling up our page menu and our phone number. First up, let's tag our active class in our page menu. So we're still trying to target links inside the page menu, but we're targeting them when they have a particular class or a particular state. So we know that we want to target them if they have the active class that we applied here. But we also wanna target them if the mouse is hovering over them. So we can remove that class and instead put :hover, so now what we're gonna add here will apply when you mouse over one of those page menu items as well. Now if you take a closer look at the active button we can see we have a drop shadow applied. We have that same highlight blue as the background color and we have a white foreground color or text color rather. We also have rounded corners. So for most of this code what we can do is jump into this code tab up here. And we can grab the border radius, the box shadow, and the background. We'll just replace that with our variable in just a moment. So we're gonna copy that and then just paste the lot into our CSS here. And we know that that background color is the same as our highlight color. So let's just copy this line in here. And replace that hex code with it. We also need to set our text color to white. You already have a variable defined for the color white up here, background_color_one. So we're going to add in a line to define our color, set it to a variable, and we'll set that to our background color one. So now there's our active button, and if we hover over any of these then we get that same button style as well. The only thing now left to do is to finish styling this phone number up here. We need to change up the way that this text looks and we need to correct the fact that this icon here is a little bit too high compared to the text. So let's take a look at how this is styled in Figma. So once again we're using that highlight color as the text color for this phone number. The font weight is medium, the font size is 14 pixels. And if we look at the height of our phone number and if we look at the height of our phone icon, we can see the height is 24 pixels. So to help us to align the icon and its text, we're going to want to set the line height of our phone number area to be 24 pixels. Which in rem value, this is going to be 1.5 rem. So let's apply all that to our code. So first, we wanna target our phone number class. We'll add in the font size that we saw, we need to add which in rem units is 0.875. We want our medium font weight which is 500. Our text color is that highlight color and I'm just going to copy and paste from the our man link styling. It's always a good idea to copy and paste where ever you can, it just save you a little bit of time. Set our line height to 1.5 rim. Now let's take a look at what we've got so far. All right, so the text is looking just like it is in our design, but we still need to do a little bit more to help align these two items. And this is where we're gonna use Flexbox again. We're gonna apply it to the parent element of these two items, as a quick and easy way to get them both aligned properly with one another. So we're gonna set display to flex. And now we're going to use the property align-content, And we're gonna set that to center and now everything is perfectly aligned on that horizontal axis. The only thing left to fix up here is we need a little bit of space in between these two items here. In Figma, we can see that that should be 8 pixels of space. So we are going to target our phone number selector, and then the span inside that. And we're going to create a margin on the left side of 0.5 rim, which is 8 pixels. And there we go, that gives us a nice little bit of space. And there's only one thing that's still not quite right about this page menu. If you look closely at the page menu in our HTML compared to the page menu in our Figma design, you can see that these items are a little bit closer together than they are here. Something is causing a gap in between these items. Let's take a closer look at that. If I open up the inspector and select one of these items, you can see that there's little spacer here in between each of these. And this is something that can come up when you're working with Flexbox. What that actually is, is this line breaks in between each of our menu items is being treated as a little gap. So the easiest solution is just to delete the whitespace in the file in between each one of these menu items, so that they are all on the same line. And now when we go back to our HTML, you can see there's no longer that little marker anymore. And that these page menu items are closer together, just like the spacing in the original Figma document. So that is everything that we needed to do for our main header. That's two out of three completed. And in the next video, we're gonna go through and created this hero header unit here. We'll get this background image loaded in and taking up all of the available space here. We'll load in this content in the middle of the hero unit. And, once again, we're gonna use Flexbox to control the alignment of all of those items. So for that, I will see you in the next lesson.

Back to the top