FREELessons: 26Length: 5.7 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.3 Header Icon & Polish

Hi, guys. Welcome back to Getting Started with the Semantic UI. And in this lesson, I want to finish off the header. So, continuing on from where we last left off. We need to first of all, hide the side bar when we go to resolution of 631 pixels or greater. So, let's go ahead and do that. So, right here in this media query, what I want to do is target the element with the ID of m_menu. So that is our menu slash sidebar and then I want to check to see if it has the class of active. And if it does have the class of active it's going to be visible and then I'm just gonna say display, none. So it will hide it. So, all I need to do now is go back into the browser and hit refresh. And then when I go down, you'll be able to see that we have the sidebar, and then you can scale up and so on and so forth. So, now you can see how this works and everything still works exactly as expected. So now that we've done that, the next thing I want to do is add in some header text. So let's review the Semantic documentation. Open up the menu. Underneath the header Elements we have the Header section. And you can see here we have a few types. You know you have different sizes right there. You also have the headers with the icons in. I really like this header here. And you also have states which the only state is the disabled header. And then also you have variations such as the attachments that whether they're attached at the top or the bottom. You also have all these different alignments with the header. Right, left justified or centered and also you have different colors as well. So you can just review all of that. And what I want to do first of all is take a look at this header and the mark up that's needed. So, the first thing we have is a div element with a class of UI icon header. Inside of there we have the i tag standing for icon, and we are setting the type of icon, so it says circular. And then we have what icon we want, so in this case it's the question mark, but I'm gonna change that to the chat icon, and of course you need the icon class in there. Then you have the ending i tag and the questions label or the main header text. And then underneath there, you have a div element with a class of sub header for some smaller text. I don't really want the sub header. I just want the main circular icon and then just the main header text. So I'm going to copy that out. Open up Sublime Text and then we want to paste it inside of the main head div. And I'm just going to paste it below my button. And then once I've done that I can then change the icon to be the chat icon. Again, you can refer to the icon documentation. And then also the label is gonna be learn, live, and play. And then we can save that and then we can refresh the browser. Now the text right here is this very dark color. And I don't really like that. I want to invert the colors so I'm gonna change it from dark to light. And again if you review the documentation, under variations. You had Inverted if I scroll down. There you go. Inverted, so we can invert the colors for different contrasts. So let's go ahead and add in the class of inverted. Go ahead and save it. And then we can preview this. Just like so. Now even though we've got this looking fairly nice, I want to make this a little bit bigger. And then we'll have to worry about the mobile version later. But right now, what I'm going to do is scroll on up. And right here you can see we have the huge header. So I can see hear we have the class of huge. And I'm just going to add that in so it becomes a little bit bigger. So add that in on the div element right here. Save it and then preview. So now we have a nice big header. But the next thing I want to do is focus on the icon, so let's review the documentation for the icon. So I'm just going to click on that section right there. And if we scroll down, you're able to see that not only do we have an icon reference, but you also have the different variations of your icons. So you have very, very large icons, which the size of the icon is determined by the header in our case. But, however, we have the circular icon variation, and if we look at this right here you can actually use the inverted classic gain and that will actually then take the border away and actually fill it up with color. That's what I'm looking for, so I'm just going to add in the class of inverted onto the icon. Save it. Refresh it in the browser. And there we go. So this is looking a bit nicer, but again there's still some finessing to do and of course then we have the mobile version which you can see there's already problems arising there. So, all I'm going to do is take a look at first of all nudging this down a little bit when it comes to the larger desktop version of our site. So, I'm gonna. >> Review the main CSS file and inside of here we're gonna create another media query and it's gonna have a minimum width of 900 pixels. So the resolution must be 900 pixels or greater and then I want to target the header. Now, we do have the class of header right here, but we may want to use multiple headers throughout the site. So, in order for me to target this specific header, I'm going to take a look at the [UNKNOWN] with the ID of main head. And target that first and then the element with the class of header. So let's go ahead and do that. So put in the hash, we're gonna say mainHead and then we're gonna say, look inside of there for the element with the class of header and then we're going to set the margin top to 10%. And I'm using percentage cuz it's nice and fluid. So I'm gonna save that. And then we're gonna move on over into the browser and simply hit Refresh. So, once the resolution goes to less than 900 pixels, those styles no longer apply. If it goes to 900 pixels or greater, it will apply those styles. So this is looking pretty good but then of course, we are going to have problems when we keep going down and down and down. Now, to solve the problem I'm actually gonna change the font size. So, let's shrink this in a little bit and then I want to inspect the header. So, I'm just gonna click on the header div, and then we wanna take a look at the font size. And we can edit this live, so I can change it to something like one EM and obviously that's a little bit too small, so let's go with 0.7. That looks very, very nice. So I'm gonna stick with 0.7 and let's just scale this down a little bit more and that's looking real good. So, now that I know what size I need, I also need to know when we need to actually change the size. So let's put that back to two EM and let's just scale this down. So you see there, it's a round about there that I would like it to obviously go down to 1.7 EM. So let's take a look at the width of the body. So the body is 723 pixels in width. So what I'm gonna do is just close out of that. So let's go down to a new line. Create this media query. And it's going to have a max-width of, and we'll make it 730 pixels, just to be safe, and we want to target the element with the ID of mainhead. And then we want to target the element with a class of UI header, and it's also got to have, the class of huge. It really doesn't matter what order you do this in, because CSS is just gonna check that it has all of these classes regardless of the order. So, once we've done that, I can then say change the font size to be 1.7 EM. Then we can save it, and then just hit refresh in the browser. So, you can see there. Now this is looking real good and then once we've done that we go into the mobile version. So this is more for the larger smartphones and smaller tablet devices but, right here you can see that there is obviously gonna be a major problem. So this header just really isn't going to work. So what I want to do is have a more in line header that's better for the smaller resolution devices. So the way I'm going to do it is by taking a look at the semantic documentation and I want to look at the headers that we have and the types of headers I can choose from. And I'm just gonna scroll down, and here's the header that I'm looking for. I'm looking for the icon and then the main header in the same line. So, I can review this code and right here we have a header2 and then we have an icon, and then we just have the text for the header. So, let's copy the header2 and then go back and take a look at the headed up php file. Paste that header in down below. And then what I want to do is change the icon. So it's gonna be the chat icon. And then also we're going to have the text, which is learn, live and play. Go ahead and save that and then I want to hit refresh. So now there is another problem. We have both these headers being displayed at the same time. So first of all let's make sure that the mobile header is not displayed on the desktop version. So the way I'm going to do is take a look at the CSS file, and we already have a media query that has a minimum width of 631 pixels. So, if the resolution is 631 pixels or greater, I want to hide the mobile header. So the way I'm gonna do it is by targeting the ID main head and then I'm just going to target the header2 element. So I'm gonna say header2 and I'm gonna tell it to display none. Save it, and then you can refresh the browser just to make sure. And there we go. And then when we go to a screen resolution of 630 pixels or less, I want to hide the huge header. So I'm just going to copy out this selector, and I'm going to paste it in media query that says max width 630. And so we want to hide the huge header when the screen resolution goes to 630 pixels or less. So I can say display none. Now to make sure that this selector takes precedence over this selector and so forth, what I want to do is I can either go up another level, so I could target the body element, and then inside there you know look for element with the ID of main head, and so on and so forth. That's one way of doing it. Or what I could do is check an element for four classes instead of three classes. So if I take a look at all the classes we have, we have UI icon header huge and inverted. So I'm just gonna add in another class of icon. So let's go ahead and say .icon. Again, no spaces. So now we're checking the chart element for four classes instead of three, so this selector takes precedence over this selector. So, let's save it now and then we can refresh in the browser. So, now, we have the mobile header. And then you have the main, just like so. And that's sort of by using just real simple media queries with min and max width. Then also what we can do is invert those colors because the dark color doesn't really work very well here. So for the header2, I'm simply going to add in the class of inverted. Save it, and then hit refresh. So everything looks real nice, you know scale it right down, and scale it right up. So the next thing I want to do is take a look at setting some of these links to active when you are on that specific page. So I'm gonna open up all of the four pages of my site and then let's put this in order so we have the index, the about page, the portfolio page, and then finally the contact page. So with the index page, I'm going to add the rel attribute onto the body. And instead of setting this to one, I'm gonna set this to zero because the index in JavaScript is zero-based. So therefore, the index page is zero and then the about page will be one, the portfolio page two, and the contact page three. Then once we've done that what I want to do is take a look at the JavaScript. So we're creating a variable called rel and this is storing the value of the rel attribute of the page. And so right here what we're doing is we're targeting the body element with the attribute of rel and you'll notice that that attribute name is in the square brackets. Then we are running the ATTR method, and we are passing in which attribute we want to grab the value from, which of course is the rel attribute. Then what we're gonna do is take a look at adding in the class of active to the specific menu items. So first of all we have the normal navigational menu that you can see on the desktop version. And so then what I want to do is target that ID menu and then I wanna look inside of there for the anchors. So that's what I'm doing right there. I'm saying target the anchors and then I'm saying eq, which is the index. So it finds the one with a specific index. So if it's the index page, it's gonna have the attribute value of zero. And therefore it's going to target the first anchor. And then it's going to add the class of active, giving it that nice little pointed arrow. But don't forget we also have the mobile menu. So, m_menu right here, which again, is here. And then we want to look inside of there, these anchors and then, we want to check their index for a specific index, zero, one, two, three. And then, of course, it will add the class there. So if you go ahead and save that, and then we preview this inside of the browser. So if I simply hit refresh, you'll notice we're on the about page, home page, and so on and so forth. And because the header is shared between these files, it's automatically done for us. And you can see that, that specific menu item in the mobile menu is being set to active. So thank you for watching me in this lesson and please join me in the next lesson where we'll take a look at developing the footer.

Back to the top