Learn how to integrate a responsive navbar that also works great on mobile using Bootstrap.
- [Instructor] Now, you do want to make sure your content works in different browsers, actually works at different screen sizes, and the content flows appropriately. So, let's just take a look at the site. I'm going to go down here and preview this in Chrome, right, and, in general, I can see how this looks. Navigation is right there. I can scroll down. Obviously, it scrolls away. I'm not crazy about that. What if my navigation gets more complex and longer? What happens on mobile devices? So, these are some of the things I need to think about as I'm developing this site.
So, it's all of this code that I didn't have to write myself, okay. And, if I take a look right over here, oh, there is a nav bar. That's pretty cool. But if I click on that little icon right there, which is a flyout menu, I can create a nav bar that's fixed to the top, the bottom, or even inverted if I want. But, in general, I'm going to create one that's a nav bar fixed to the top. So, selecting that, what happens? It adds it to my site.
You can see it changes just like that, and now we have that as a dropdown. I'm like, this is fantastic. All of this code that I don't have to write, okay. So, this is cool. But, let's see what's going on right over here, 'cause what it does is it starts adding all these various files as Bootstrap CSS. It gives me this absolute path. So, the first thing you want to do is once you add it, so everything gets put in its right place on your site, you need to save your site. And I can do a Save All is typically what I do. It says, hey, you know what? We're going to put all of those files in their correct place.
Okay, and a good way to see how this stuff is formatted is click on one tag and it will highlight the closing tag. So, I can say, hey, you know what, I don't need that stuff. Delete, right. Same thing for this form, of course. I don't need that form for a lot of this, even this unordered list as I select it. You know, just kind of cleaning up, but, essentially, right here, this section, this is what I want to do. I want to actually take my navigation right here. I have this ul class called navlist that I've customized.
So, I'm going to copy that word, and I'm going to paste it right in here, okay. So, it's going to customize it with those CSS settings that I have, okay. So, that's what I'm doing right there. Next thing I need to do is take all of these list items, cut them, removing this bar that I just don't need anymore. And right up here let's just replace this bottom one right here. So, I'm leaving the first one just as an example. Moving that content in. But you can see it's added it in here.
And the reason I like this first one is this first one has this class active. The fact that it says active says, hey, you know, I'm highlighted right here. I'm like, okay, that's great. I can actually take this, copy that word active, and put it for my homepage. So, space, just paste in active right there. So, now Home was highlighted, and I can get rid of this one right here. Super powerful. Let's save everything. Let's test this out in Chrome or whatever browser you have, and you can see my content right there.
Again, scaling it down, that content disappears after a while. I click, I can see that they are right there as well, okay, and I can even customize this further. These actually fit fine like that, but I can also stack them so I can get rid of the whole idea that they're floating to the left. But there you have it. I have now a fixed nav bar that's also responsive, and it's going to work across different browsers and devices all thanks to Bootstrap.
- Understanding the Internet and websites
- Adding HTML content to a webpage
- Styling content with CSS
- Creating navigation
- Adding more pages to a website
- Creating a flexible layout
- Linking to other pages and websites
- Creating a contact form
- Creating a responsive site for mobile devices
- Uploading and testing the website