What Form 2220 Toggle 2023-2024

R-ready hostas welcome back. 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. Right now, looking at it on a desktop or 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. Let's say that you had a lot of items, well then you would have to scroll way down before you see any part of the webpage. 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, to make this bigger again, let's hop back into our code and check it out. Now, I reverted back to tutorial number 6, two tutorials ago. In other words, I took out all the extra stuff like on the drop-down menu and the right alignment. 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 that 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....