Video instructions and help with filling out and completing What Form 2220 Toggle

Instructions and Help about What Form 2220 Toggle

R-ready hostas welcome back and in this video I'm going to show you how to add a toggle button so your menu doesn't look horrible on mobile devices so just right now looking at it on a desktop or a laptop the menu looks pretty sweet but if you were to look at this on a phone this is what it would look like the menu would take up 1/3 of the entire screen and let's say that you had you know a items well then you have to scroll way down before you see any part of the webpage so I'm going to show you guys how to add a button just like this where you can click it and it can either collapse or expand your menu so make this big again hop back in our code and check it out now I reverted back to I think it was tutorial number 6 two tutorials go in other words I took out all the extra stuff like on the drop-down menu in the right align like a pond so this is just a really simple menu I just wanted to use this as a starting point but essentially what we're going to do is we're going to say okay here are the main menu items again this is just the logo now we're going to add functionality to say whenever we click this button that we're going to be making in just a second hide this section right here and whenever we click it again expand it so we're essentially just going to be expanding and collapsing this now in order to do that we need to change the div slightly the first thing we need to do is for the class we need to give it collapse so it's able to be collapsed in navbar collapse now another thing we want to do is this just gives it the functionality to be expanded and collapsed we want to give it an ID so we can actually say okay this button is trying to collapse this essentially just so we can target it so main navbar so whenever we click the button we're going to say collapse what do you want to collapse main nav bar and you put your button right inside the net bar header above your navbar brand your logo whatever you want to call it and of course it's a button and it has four different attributes that we have to make the first one is the type and this is just button yes this button is a button the second one is the class and this is navbar toggle now the third one is data toggle are you popping up nope data toggle and this is collapse and the last one is data target so you know that this button is trying to clap something and we type this so I don't get confused all right so okay this button is going to collapse something what are you trying to target well we are trying to target this div right here so hash tag for the ID and main navbar or whatever the ID of your div is now inside your bun we need to say okay what icon or text you want to go on here so what people usually do is if I pull this up you see that these toggle buttons some people call these the hamburger icons where they're just like three lines and these are just um I was kind of like the universal symbol form but for some reason bootstrap thought it was would be funny to um you know not include the ability to have that icon easily so you have to make it in kind of a weird way and I'll show you how so we we have to make each line individually kind of weird but you know it's what we got to do and this is icon bar so this is going to give us the top bun this is going to give us the bottom or excuse me the meat and this is going to give us the bottom button so this is just the design of the button this is the overall button in the functionality and whenever we click it it's going to target this right there so now if I run it everything looks normal by default but whenever we shrink it on a mobile device look at that we now get our button so we can click it expand it click it again and collapse it and now our menu to take up the entire screen and just to show you guys what I was talking about say that we removed one of these you see how this button looks normal right now let me refresh it we only have two lines on it so I don't know why they just didn't make an easier way of doing this but hey you know I'm not making bootstrap I'm just teaching it so there you go hopefully you guys understand how to make navigation bars in toggle buttons and yeah pretty simple see you next video