Hamburger Menu Styles Exercise

[00:00:00]
>> You're gonna do the following. Number one, you need to go find our base styles from any of the codepens that we've written recently. Grab your base styles and drop it into your codepen. Number two, take a look at the styles that you've been given here and make changes to whatever's there.

[00:00:20]
So for a hint, what I'm talking about, we were given a body element with a font family of Poppins by default, right? We can just delete that, right? We have a body element already styled up in our base. Make sense? Okay, so that's what I'd like for you to do next.

[00:00:38]
I'd like you to copy over the base, see if there's anything in here that you can delete because it's duplicative of what you already have in your base styling. And then third see if you can work on styling that just looks like this, don't worry about the hamburger button part, just see if you can get a start on this styling here, okay.

[00:01:05]
See if you can make that much happen by modifying the CSS that you have. Let's go through the changes that you might have made to your CSS for the desktop version of this layout only. So, first of all, what we did was we went back to one of our old codepens of the more recent old codepens and copied in our base.

[00:01:29]
So we copied in our base layer and we put that at the top of our CSS. Next thing that I did was I set up a layer to go around all of the styles that already exist right there and I call that layer header because it's the header of the webpage.

[00:01:44]
Makes sense? Super exciting stuff. At that point now we need to think about which of these styles do we need to keep, what do we need to modify and what can we get rid of. Make sense? Anybody have any styles that they got rid of? We already mentioned the body style it was there, it had a font family of Poppins, we got rid of that.

[00:02:06]
Okay, well, generally speaking, you can always assume like, if it says h1 all by itself, do we already have an h1 style? We do. So that can go bye bye. [LAUGH] Just get rid of things like that. We scroll on down here, we get to our action styles.

[00:02:29]
Do we even have any action styles anymore? No, we got rid of them. So you can get rid of the styling it pertains to that. And that would also pertain to the action styles for focus and hover, we can just get rid of those. As always if you're scared, just comment them out.

[00:02:47]
All right. Make sure that they do what you expect. And then after that we can sort of guess the rest of what's here, may or may not be relevant. So let's go from there. So let's start with this h1, that probably bothering a lot of you, right? Our h1 is called Magenta Lime, it's blue.

[00:03:13]
What should it be?
>> White.
>> White, our cursive font, right? What would be a selector to set that up?
>> You could give h1 a class.
>> You could give h1 a class, right? We gonna give h1 a class of some kind and put a style in here.

[00:03:33]
What else could we do?
>> Id of top and then to h1 and a.
>> And h1, and then potentially even a like that, right? Because we're talking about it's a link. When we look at our HTML, right, we have a header, we have an h1, and then we have our link.

[00:03:52]
Yeah, makes sense. So let's do that, top h1 a, font-family, right? var(--cursive). Color: var(--white) Okay. Closer, looks a little big, doesn't it? Okay, so we can change the size, right? Font size, and you can experiment with the font sizes that you have, but I think you'll find that var(--h3) is close to the size that we actually want here.

[00:04:36]
All right. And when I hover over this, you want that name, band name to change, color? Would you like that? Yeah, that would totally be cool, wouldn't it? So let's set up a hover style. Top h1 a:hover. What color would you like?
>> Cyan.
>> var(--cyan).
>> I suppose maybe lime or the pink given that there in the logo.

[00:05:12]
>> Lime?
>> Fuchsia, magenta.
>> Lime, magenta. [LAUGH] So you can test any of those, whatever your favorite happens to be, you can keep it. Yeah?
>> There seems to be a transition there.
>> Yeah, look at that. Where's that coming from? Can anybody find it in the CSS?

[00:05:38]
Take a look at your CSS and see if you can find where that weird transition thing is coming from. It'll be in those styles that are outside the media query. So how do you think about this problem? We know it's a link, right? So we're gonna look for A's.

[00:05:55]
[LAUGH]
>> Is it 174?
>> Yeah, around line 174, somewhere in here. For me, it's 165, but it's this one here. top > nav a:focus, top > nav a:hover. There's a transform there which makes it bigger, okay? So that's close. It doesn't look like it's getting bigger though, does it?

[00:06:20]
Okay, so keep looking. We need an A.
>> There's on line 169. id top a, and there's, I have a footer in here still I'll just delete that, but.
>> Okay. Delete the footer.
>> Looks like there's a transition of.
>> Yeah, right here. For me is around line 150, somewhere in there.

[00:06:48]
top a. So here we have a transition. And what are we transitioning? We're doing a transform and a color and a box shadow, okay? This definitely applies, some of that is happening, it looks like the color is happening. Maybe the box shadow, not entirely sure on that, but not the size.

[00:07:09]
Make sense? Okay. So that's how you figure that stuff out. You just sort of go well, what what do I think it might be and then take a look and see if you can find something close. Do you like it? Do you wanna keep it? Great, let's keep it.

[00:07:27]
That's your next thing you ask yourself, right? Yeah, or you ask your designer friend, right? Can I keep it? It's so cool, can I keep it? [LAUGH] All right, great. So next, we have, Let me make this a little bit bigger. Okay, there's our fine navigation up there.

[00:07:52]
[LAUGH] Not quite what we want, is it? So did anybody manage to get some styling to work for that? No? You did?
>> Yeah, I put it on nav.
>> Okay.
>> And that allowed me to change the font, but not the color.
>> Putting it on nav allowed you to change the font, but not the color.

[00:08:17]
Great, so you just did top nav right here, this one?
>> I just wrote a new-
>> You wrote a new style.
>> Yeah, and I just did nav.
>> Okay, top nav and no greater than sign then that's what you did. Okay, we don't need this flex grow thing we can get rid of that.

[00:08:38]
So here for top nav. So what Andrew is saying is if we go to font-family Pacifica, or sorry, var(--cursive), right? The font changes but the color stays blue even if we say our color should be var(--white), right? Why doesn't the color change? We know we have the right selector because our font changed, but the color didn't.

[00:09:10]
What's going on?
>> You have to select the a tag in order to change its color.
>> Got to select the actual a because that's more specific. Where we have to get through from nav, we have to get through the ul, the li, and into the a before we actually get to the where the color is normally set, right?

[00:09:29]
If you think about links in a default HTML webpage, no styling, how do they look?
>> Blue
>> They're blue and underlined, right?
>> We have to get that far in override that style, okay?
>> Is that for links specifically?
>> That is for links specifically because they have that style on them that's coming from the browser.

[00:09:51]
Yep, so we can go to either top a, as we know all of these styles that are here apply to everything that's here in our document. But we have earlier in our document we have top h1 a, even though that comes earlier it's more specific, right? Cuz it's got three selectors in it, the ID and two HTML elements as opposed to this more generic top a.

[00:10:25]
Make sense? So if we want this to apply specifically to our nav bar we can say top nav a. That's one way to do this. And then we can change our color from 048 to color var(--white) Cool? And for some reason, we just got an underline on Magenta Lime.

[00:10:59]
Did anybody get that? Yeah, well, I guess this no longer applies. So we can add that back here in our top h1 a. Text-decoration: none. There it goes. While we're here at our top h1, let's also say margin zero. Because our h1 has a margin on it by default.

[00:11:34]
Oops, sorry, that's in the wrong spot. We need just a plain old top h1. Top h1, margin 0. That's causing part of our alignment problem. See how nicely that now aligns when we turn off that top margin on our h1. Remember h1s have margin on it by default.

[00:12:00]
Comes from your web browser.
>> Did we not reset that When we did the base?
>> I think we left some margin on our h 1's from the base. But a great point, you might actually depending on your base, you might have turned it off. Okay, so we've got our h1, we've got our a's now let's worry about our layouts here.

[00:12:32]
So we started here with display flex and a gap of 1.5 rems, okay? So what is this top style applying to? What are its children? We have the h1, we have a button, and we have the nav, right? So basically it's putting a 1.5 rem gap in between your h1, your button, and your nav, right?

[00:12:59]
Anybody want a bigger gap? Maybe we need to do some other things here with our layout. Make sense? Okay. So, here's what I recommend. After we go display flex let's go flex-flow: row wrap. Actually, nothing on here will look like it changes, but it's good to call this out because by default the value is row nowrap.

[00:13:30]
And that would mean that if your screen gets small enough, nothing will wrap onto the next line. It will get cut off. So by saying row wrap, we know that this is gonna at least wrap and stay on the screen. Then I'm gonna say justify-content: space-between. And that will push these two things apart.

[00:13:56]
H1 goes down here, nav bar goes down there. Very, nicely. The button is invisible on desktop, so we don't have to worry about it right now. So the gap kind of becomes irrelevant at this point for that because we're gonna keep these apart that way. Make sense? Okay.

[00:14:18]
We can set a max-width here, max-width. This is desktop, so let's say it's 1200px for our max-width. And we can center it on the page, and give it a little bit of margin. I'm gonna say 4rem 2rem. So it's not shoved up against the edges of the webpage.

[00:14:41]
Makes sense? How's everybody doing so far? Okay. Yes.
>> Are any of the reset CSS files useful or should we only use those when starting new projects?
>> You are welcome to use reset CSS files if you wish, but as you say, if you start using these at the beginning of your project, right, then that's gonna apply to everything else.

[00:15:08]
To try to bring in a reset CSS right now in the middle of our project, we'll change a whole lot of stuff here in our document. [LAUGH] We probably don't really wanna do that. The other thing to mention is that there is a difference between a reset CSS and a normalize CSS, okay?

[00:15:27]
So a reset CSS is the older way of doing things. What that does is it turns everything off. So it gets rid of all the font sizes, it gets rid of all the spacing, the margin, and then you have to redeclare everything in order for that to become a reasonable style sheet.

[00:15:44]
The normalized style sheet will normalize padding, margin, font sizes and stuff between all of the browsers. So if you like using normalized stylesheet, you are more than welcome to use those. I haven't used them here, mostly because, again, this is more of a teaching exercise, a learning exercise.

[00:16:05]
I want you guys to become cognizant of where some of the styling is coming from, some of it's coming from the browser and so that is why I'm not using them here in this project. In real life and most likely you would in fact use one of these.

[00:16:19]
All right, so everything is looking pretty good here now for desktop. Anybody have any comments or questions on that except, looking pretty good. Comments, questions? The one thing you might wanna do is maybe you wanna put a little bit of space here between the the logo and the bandname and you could do something like that if you go into your h1 and we go into our span somewhere in here, we have to scroll a while.

[00:16:51]
There we go. I'll give my span a class of bandname. And then I could put in a style here of bandname. And I could say, padding-left: 1rem. Just give us a little breathing room between our logo and the name of the band. Make sense? Okay. We have a good hover state for the bandname.

[00:17:26]
How about the hover state here for our navigation items? Anybody happy with that?
>> Not in particular.
>> Okay, shall we fix it? Tell me where the style is that we need in order to fix our hover state here for these navigation items.
>> 186, mine might be different, but there's nav a:focus, nav a:hover.

[00:17:51]
>> Right here. Yeah, exactly. Yep, right here. So somewhere around, for me it's 172, but that's what we're looking for. top nav a:focus and top nav a:hover. So this is currently set to black and it's set to scale. Do you like it?
>> No.
>> What would you like to change it to?

[00:18:14]
Shall we change that color?
>> Cyan.
>> You want the cyan? Okay, var(--cyan). Okay, so when we hover over those, they turn blue, but they're still getting big. Do you like that? Yeah? Maybe? No? [LAUGH]
>> Terrible.
>> [LAUGH] Okay, so it's up to you. If you wanna keep it, you can have it.

[00:18:41]
If you wanna get rid of it, you can do that too. If we don't want it, what should we eliminate from our code to get rid of it?
>> Transform.
>> The transform, right? So if you don't like it, get rid of the transform. And then things will not change size when you roll your mouse over and we just get our color change.

[00:19:01]
Okay?
>> What's the difference between hover and focus?
>> So, focus is what happens, if you've ever tabbed through a web page before.
>> Yeah.
>> Yeah, you get that box around stuff. That's the focus state.
>> Okay.
>> Yeah.