How to switch a menu nav from desktop to mobile phone

Hi there, this video we are going to implement our really simple Mobile Nav, that we built in a last video, into our full site, where it goes from this to Desktop, to Mobile, with a sweet little drop-down. Now we kept this one separate, so that we could really kind of focus on implementing jQuery, but now we're going to fold it into our largest site. And, like this site here, this is what we currently got, we've got Buttons, and what we do is adjust the spacing on Tablet and Mobile, and I like this because it's going to really show us, what ends up happening in the real world, when you are trying to implement stuff, and it's never this simple, where you've just got this clean clear. You've got to do battle with existing bits of code, like in our case we've got this weird little drop-down thing here. We're going to have to unpick that to try and make this work. It's more of a real-world practical example, of the things that you might run into when you are trying to implement it. It's a really long intro, Dan, let's get started. 

So we're going to open up our existing site. I'm going to open up index.html, double-clicking it, open up style.css. Drag style over here, and let's get started. So first thing I want to do is, we're going to turn, let's turn Nav off when it gets to the Tablet screen. My mock-up, I've decided to go to this Mobile menu even at Tablet, so it's going to be on for both of these. So let's go and turn what we currently have off, and actually let's preview it, what have we got? It appears on the wrong page. So it gets down to here and it switches out. That's what we did previously, right? That is definitely an easy way to do it. We're going to do it with our JavaScript now. 

So what I want to do is, instead of flicking around, I want to just turn all those buttons off. We're going to turn our Mobile version on. So in VS code we are going to find our Nav. So this Nav here is going to turn off when it gets to Tablet. So I go to Tablet view. I'm going to double check I don't have anything else. Trying to control Nav, this here, no, so I'm just going to say, just above here I'm going to say, Nav, when you get to Tablet mode, display none. Now you are like, "Hey, what about this one?" Like we did all that styling in the last kind of few videos, to make it do all that kind of weird display changes for mobile. So this thing here is redundant, there's lots of stuff that is redundant, and I'm kind of half leaving this in the course, because it's not as easy, it's never as easy as like just, doing what I did in that first video, and just kind of adding it in. There's always like, "Ah, this bit controls it all, this bit's messing with it". So this one's going to be a little bit messy, but for good reason, so we can learn how to fix it. 

All right, so we're going to ignore all that. Let's just make sure it actually turns off, for, ready? Here you go. So when it gets down to Tablet mode, and down to Mobile, it turns off. So what we want to do now is have something else turn on, a little stripy line. So let's go back to VS code. So underneath Nav what we'll do is we'll create another Div tag, and we'll call this one dot, '.', let's call this one mob-wrapper. We're going to put everything inside of this. So inside my mob wrapper we're going to add our icon, of those little three stripy lines for our Mobile Nav, plus another set of these. So let's cheat, let's grab our image, so open up jQuery Nav, and this is the chunk we want. That's the icon that we brought in, the image, in SVG. We add a small text, we added a width, and we gave it a Class of Burger menu. So we're just going to cheat, because we're like, "Already done that." So we've got him in, just happens to be the wrong-- there we go, nice. 

Let's just check he actually appears, clean it all up. There he is. He's on the page but I want to turn him off, because he's appearing all the time. I only want him to appear when we get down to Mobile. So what we do is we, we've got three kind of parts. Remember, Global - then we - which is in our case, Desktop, then we get down to Tablet view, then we've got Mobile view, and because we're turning him on for-- we'll turn him on in Tablet. So let's find the bottom of here, remember, avoid the last curly brace. The whole Media Class is all wrapped up in opening curly brace, and it closes all the way down here. So always have two at the end, if you don't, things will go wrong. 

So we're going to say-- who do we want? .mob wrapper, I would like you, my friend, and everything inside of you to turn, actually we don't want to do anything for him yet. I want to cut him out and I want him in Desktop view to turn off. So just before the closing or opening of the Tablet, I'm going to say, mob wrapper, you are a display of none, please. So he's off on Desktop, which is perfect, but he never turns back on. So now we need to say, so he's off on Desktop, and then as it goes through, it's going to say, on Tablet though, I'd like to turn him on. So down the bottom here, before our curly brace, we're going to say, display:block. He's back on. So off on Desktop, and then on, on Mobile, or at least Tablet in this case, and because we don't say turn off again, it just flows through to Mobile. So we don't have to say that again in Mobile. 

Next thing is I want all the bits off the side, that we're going to turn off. Remember, all the buttons that are going to drop off, that we want activated by this little click. So what we need is-- we could just go and steal all of this. So all these buttons here, actually we'll grab every-- no, we'll grab these buttons, so there's my image, underneath my image, before our wrapper closes, so there's my wrapper, ends there. Just after the image I'm going to put in these guys. These guys need to be in their own Div tag. Why? Because they're kind of just floating around a bit. At the moment they've got no kind of-- no grouping, this guy's by himself, these guys, these three guys need to be tied together. So 'Command-Shift-P', 'Ctrl-Shift-P', start typing wrap, and we're going to use wrap with abbreviation. I'm going to wrap them up in something called, something I'm going to make up right now called, mob nav. Nav, come on, Dan. Can't see the keys, all right, mob nav. And it has to have a period in front of it. 

So wrap with abbreviation, .mob nav. Nice. So these guys here, let's have a little look. They should be off on Desktop, because they're all wrapped up in this thing, called mob wrapper, that we're turning on and off. If you still see them it means you've probably got these guys, after this closing Div, it needs to be inside. Nice. So, off on Desktop, and Tablet, they both turn on. The structure is all weird, we'll fix that for the last thing. What we want to do is just get this thing to click on and off first. So let's turn it off by default. So this little mob nav, that's why it's good in a wrapper, because we didn't, all off on one little go. So I'm going to say, on Tablet view, mob nav, .mob nav I would like you to just be off, display:none. Can't see them, I'd like to turn them on with JavaScript, when this thing is clicked. 

So to implement our JavaScript, or our jQuery in this case, we need to do two things, remember, we need to load the library, which is the kind of all the rules around JavaScript or jQuery, and then we need to actually put it on Custom Coding. So just like we did before, we're going to go to our Exercise Files. In your Exercise Files, there is Project3, there's one in here called jQuery Mobile Nav. Open that up, and that's the CDN, that is linking the library to tell our browser how this all works. And remember where we put it, we can put it up here in the Head, but it's more common to put it down here in the Body. We talked about the reasons why before. 

One of the things that happens is, like when I paste it, can you see, my file turns green up here, and a bunch of errors appear down the bottom here. It's because we're using a helper little extension, to give us kind of error checking for HTML, and it just doesn't recognize this. It's totally fine and legitimate. It's looking for a closing angle bracket after the script, but we're kind of implementing it slightly differently, and it works just fine, so we're just going to have to ignore that. So the extensions are great, they're built by other people. It's a bug in this particular one. Will this person who runs this extension go and fix it? Mike? I'm not sure. Maybe it's something that can't be fixed because of, he just needs to check for these different things. 

So I guess there's just-- a couple of things, one is, you'll see it go green in here, and it has three errors, which you should go and check. In our case, in my case this is working just fine. So we loaded the library, now we want to load the custom JavaScript. So we're going to create our own file, 'File', 'New File'. I'm going to save it, I'm going to call this one Scripts. scripts.js And I'm going to paste in my text. This is what we typed out in the last one, we're not going to do it again. The things you will have to work out is, I don't like this Slide toggle, going to get rid of the toggle. You'll notice that the toggle by itself is not upper case, it's Camel case. So the first one is always lower, and the middle ones are upper case. 

The other thing I want to do is make sure that these match up. So remember, when the document is loaded, I would like you to look for a click on, this thing, this Class called Burger menu, which in our case is going to be that little stripy icon, and when it does see that click on the stripy icon, toggle the Mobile Nav. So you need to make sure this and this match up. So let's do, let's add it first and then make sure they match up. So in index.HTML we're going to load our script. So we're going to go to Script Source. You're going to get a bunch more errors, and we're going to say, it is sitting in-- it's just called Scripts. scripts.js, there it is. That's all we need to do, so it's loaded. 

Next thing I want to do is make sure that this Burger menu matches up, with the wrapper that I've got. I mean, the Class that I've got applied to my icons. Here's my icon, and I'll apply that Class called Burger menu. Perfect. So that matches that. Next one is called Mobile Nav. So I want to turn this on and off. I haven't called it mob nav, I've called it mobile nav. So I've mixed up the name. So it's got to make sure that mob nav is in here. This is going to toggle that Div tag on and off. All right, let's see if it works. I have high hopes, let's go. Where are we? Here we are, toggle. So it turns it on and off, the layers all broken, but it's okay, the mechanics work, and that's what, I guess, most important for now. 

Now the reason this is happening, if you're following along with me exactly in this course, you probably have the same problem, you might not. You might-- because I want this guy up next to it, and it kind of is in this implementation. Can you see, these guys are stacked next to each other, but when they're down they kind of fall apart. So the only reason they're doing that is because, I figured that out, and I'll show you my process. So something's making that not stick, it should, because earlier on I said, remember, I said that, Header, I said, display flex, and if there's two objects in it, in this case, mob wrapper, where is it? A logo, they should by default sit next to each other, but earlier on when we were messing around trying to do, remember this guy? When we did a slightly different implementation, where we just changed it based on Tablet. 

So in Tablet, we said, here's my Tablet, and I just read through anything that could be messing with it. So in my case anything inside a Header container. So in tablet I'm going, in Header container, or below, so col, nothing to do with it. Hide Desktop only, doesn't seem to have anything in here, with the same name. Header could be, and this is where the problem is. We said earlier on we want it to be Header, everything inside a Header to display Block. That means they stack on top of each other. We could actually get rid of this whole thing. We use that just to build that other style of menu. And that's where the problems come in, it seems weird that I've kind of included in the Class. I guess I know fully well when I'm working on a site, that there's so many things that relate to other things, and you do one thing to fix a problem, and it destroys something else. 

So if I have a Class that always works perfectly, I feel like it's untruthful. So here's our thing, now gets down to this. Turn it off, turn it on. So they're displaying next to each other, which is cool. So this one, it's kind of doing what I want, right? Now what I want to do is, when this clicks it's not kind of leaping out, and we'll do a bit more style, but the basics are there. Who remembers what we did for this? We did it in an earlier menu, our drop-down menu, remember it was kind of like just pushing each other around. So let's first of all stack these buttons, and actually let's not use the My Button. 

Well, because what I want to change the styling of these, and I want to leave them looking like that, on the desktop I don't want to be changing the My Button. So let's call this one Nav Button. 'Command D', 'Ctrl D' on a PC, select them all. Let's have a look at them now. So they're kind of just looking like plain old text. So let's stack them on top of each other, because at the moment they are Inline block. So we need to get them to stack on top of each other. So these guys, on Tablet view, before the ending, closing curly bracket, I'm going to say, Mobile, uh, Nav Button, I would like you to display Block, thank you very much, hopefully. There you go, now they're on top of each other. 

The other weird thing they're doing, is when they are stacking, they're pushing the mobile button, we want to leave that as it was. So what we want to do is we want to make the position Absolute. So this guy here, instead of like being relative to all his friends, so whenever he appears he goes, "Hey guys, we're relatives, I'm relative to you", so I'm going to push you around so I fit. So what we say, over here we say, mob nav, actually, I want to be a positioning, not a relative, Absolute means I ignore everybody else, all my friends all my relatives, and I only acknowledge my parent, which in this case is, who's the parent? Mob wrapper. So it ignores all the rest of the things. In our case there's only one other thing, this image. So it ignores him and just kind of goes back to square one, which is this wrapper. 

All right, let's have a look. Can you see he ignores it, he acknowledges the wrapper, the parent around it, but ignores all of his friends inside. So it's kind of working, we need to push it around and over. One of the other things is that Nav has jammed up on the side there, which is annoying. So let's find that guy, so mob wrapper includes the icon. So we might as well push him all over. So mob wrapper, we'll say, let's have a little bit of Padding. A little bit of Padding on the-- I've typed in path, which is nothing close to it, but got me really close to Padding right. Bit of Padding on the right, I'm going to say 30 pixels. That's good, 30 pixels. Have a look, it's pushed it over enough, let's actually start previewing it. Right click, 'Inspect', let's look at it on, in my case I'm going to iPhone X. 

Remember, if you can't see that, click this little icon down the bottom here, and we're going to use this one. What else we want to do? So it's kind of across, which is cool. Maybe over a bit far, but let's style the buttons, so my Nav Button, let's do a few things to it, let's give it a background color. Background color, will do. Pick a color, I'll pick Coral. Kind of works with what I'm doing. Let's have a look. Let's put some Padding around it, and because this is Mobile, you want to make sure they're really easy to click. So Padding, I'm going to top and bottom. Bit higher than what we did for the rest of them. So 15 pixels top and bottom, and we'll do maybe 30, left and right. When I say maybe, I practiced this. I did this run-through before the class, and I was like, "Yeah, that's big enough," now it's kind of working, but I want to move it across.

So we're editing all our Padding first, because we know how far to move it across. So we'll add some negative margin. So we do margin, left, and we're going to do, margin right doesn't work, just because we've set the position to Absolute. So we're going to use negative left rather than some positive right. In this case, I'm going to say, negative, maybe 60 pixels. Putting it across, kind of close, maybe go a little bit further, 70, looks nice. Toggles nicely, and the text, let's make it center. So text aligned, let's make it center. All right, centered in there. Nice, I want to push it maybe down from this guy a little bit. So the whole wrapper, I might add some Padding to the top. So whole wrapper in my case is called Nav. So mob nav is going to have some Padding. Top. 10 pixels, probably too much. Yeah, looks all right. 

All right, it is working okay. iPad, works. Now iPad's previewing at 50%, because that looks a bit weird, buttons are maybe a bit big on an iPad, and same with this. We can change the size of this obviously down here, to be something smaller, and the buttons maybe don't need as much Padding as I thought they did. One thing that is annoying me is that it's a black stripy line, so you got a couple of options. You can open them up, so we used it earlier on, remember, we had our, Exercise Files, we had Project3, we had this SVG Burger menu. It's a black stripy line, I could just open this in say, Illustrator. Would be the easy one, or XD, and just change it to white, and save it. That's one way, I'll show you a kind of a weird thing. It will be our last thing before in this videos, is SVGs are a weird strange thing. They're not an image file as we know it. The code is actually web enabled, and you can actually see how an SVG is constructed. Let's have a little look, let's go to 'File', and let's go to 'Open'. Let's find, in our Images folder, so Project3, Images folder, I'm in my local folder, not in the Exercise File. Here's the SVG that I'm working with. I right click 'Open', it opens in an actual script, there it is here. 

Let's close down these guys just so you can see, not too confusing. It actually shows you all the kind of styles, just wrapped up in this, like it's, yeah, it's a little bit different from a JPEG. Because you can start to see how it's built, and it's built on top of kind of web syntax, so you can actually understand it. So the one we want, so this is the past. If you are from the Vector path world, these are actually the XY coordinates of everything. It's got some-- this, can you see these? These all come from, where? From these guys here, it's added Classes to it, which is weird, right? Inside of a file, and it is, this is Font Awesome. Remember those classes, FA Banners? What we want is we're looking for the color, can't see it there. Fill with current color, we're going to switch this out to just white. Okay, hit 'Save'. Have a look, oh, yeah, now it's white. You could use regular hashes, so white is FFF FFF, or pick any sort of random color you want, Coral. We'll tie him with the Nav, there you go. Nice. 

So we've got our Mobile Nav working, we'll be turning the desktop off, and then turning the Mobile menu on, and that's the easy part, right? Just turning on and off, and getting the JavaScript to work. Then there's a lot of hassle, we're trying to work out, what styles can stack them, how do we push them across, and that is the real kind of, I don't know, the fiddly parts of setting up a Mobile Nav. That's why testing is really important, because what I'll do is I'll do that right at the beginning, and then, great, go start working with stuff, then start adjusting things like the Head tags, to do different stuff for different reasons, and then later on, like a day later, I'm checking in, like the Mobile Nav's not working, I'm like, "Oh, geez!" You got to go back and figure out what happened, and problem solve that way. If you find yourself in this, and you're like, "Man, I'm a terrible Web Designer.", no, you're just a regular Web Designer. There's a lot of chasing your tail, especially when you're new and you can't kind of predict problems. I find my biggest problem is when I try and reuse stuff, I'm like, "Oh, I can," instead of creating like a separate class or a compound class, I'll just try and layer stuff together to try and be clever, and ruin things. All right, that will be it. I will see you in the next video.