Hamburger Menu Logo Exercise

[00:00:00]
>> So now that we kinda have a sense of what's going on here, vaguely, the HTML is certainly easy to understand. Let's get into that and start making changes to our HTML, right? We need to add the logo, all right? And the logo actually changes a little bit across break points.

[00:00:19]
We're gonna have the logo, just that magenta lime, the lime with the lightning bolt at mobile dimensions. We'll have that lime with the word Magenta Lime next to it. We can have that at tablet dimensions with the hamburger button. And then when we get to desktop, we'll have the lime, the magenta lime and the full navigation bar, okay?

[00:00:40]
So we need to come up with some way of including all of that. We need to modify the navigation bar to include links to home, tour, and store. They can all just go to a placeholder link. So why don't you take five minutes and see if you can make those modifications here to the HTML?

[00:00:59]
So what you're gonna need in order to get this done, at the top of the HTML in the comment up here, you'll see I've given you a link to the SVG for that lime logo. You could put that in an image element, or if you've put that directly in your web browser like this, it'll show you the SVG.

[00:01:18]
And then if you view the source for the page, it'll give you the SVG code, if you wanna include that code instead. Some of you look surprised, you didn't know you could do that, did you? Yeah, you totally can. So you could just put in the URL for the SVG in the browser window.

[00:01:35]
And then just right-click somewhere and say View Page Source or whatever similar it is, and that'll give you that code for that SVG, which you can just copy and paste, okay? See if you can get that in place, the logo, the word Magenta Lime in the correct font and make the change to the navigation bar.

[00:01:54]
So all of these are HTML changes. Tell me some of the changes that you made.
>> Including the image.
>> You put in the image, and how did you do that?
>> I originally was using a picture, but then I realized that the title that you wanted next to it at various sizes was just the h1, so I went back and just changed it to an image.

[00:02:20]
>> You went back and used an image element with the SVG-
>> Yeah.
>> URL? Certainly, that works. So you would have h1, the a href, and then that image element right here, okay? So it's definetly one way to do it. The other way to do it is to do what I did, which is to put in the actual SVG in line here.

[00:02:39]
Either one of those is absolutely fine. It ultimately depends on what you're gonna do with this SVG. As we know, if you're gonna do hovers and stuff like that, you probably want the SVG in directly. If you're not, the image element is just fine. And then you said you put in the words Magenta Lime, you just typed them on in there directly in the h1?

[00:03:01]
>> Correct.
>> Okay, so I've got mine here in the h1. I put a span element around it, didn't give it a class, just put a span around it. Why on earth would I do that?
>> If you wanna make it inline?
>> It is an inline element, that's for sure.

[00:03:25]
Remember I said sometimes we're gonna have the SVG by itself and sometimes we're gonna have the SVG with the name. [SOUND] So if we put that span around the name, we now have something to grab on to make that name appear and disappear. So that's why I put that there, okay?

[00:03:45]
Other changes that you might have made along the way.
>> My approach to that same thing was just to paste the SVG before the h1.
>> Before the h1? So you actually put it sort of right here, you put your SVG?
>> Yeah.
>> Okay, so that's great.

[00:04:03]
The only problem with that is it's not clickable. So if you want people to be able to click it and go back to the homepage, you'll wanna put it inside the link.
>> Yeah, okay, that makes sense.
>> Okay, yeah. All right, any other modifications that you made?

[00:04:25]
>> Change the LIs.
>> Change the LIs down here? Yeah, so home, tour, and store, right? There was one of those links that was tagged with a class of action that gave you that sort of buttony-looking link. I just got rid of it, we don't need it, all right?

[00:04:44]
Cool, so our HTML should be in good shape, now we can dive into our CSS, that'll be in the next part.