Hi, my name's Dan. In this video we're gonna look at creating a nav bar for our website. So we're gonna use bootstraps nav bar. Um, we could manually create one. Uh, the big problem's gonna happen when we start trying to collapse it down for mobile. It becomes a lot more extra work if we had to do that manually.
So we're gonna start with a pre-made bootstrap one and go and customize it for our needs. So to do it, uh, I've got my page here, my index page open here. I'm gonna go to the insert panel. Okay. If you can't find it, it's under a window and go to insert there is at the top and yours is gonna start off, probably said to HTML. We're gonna change ours to bootstrap components.
I want you to come down till you find this one called Neva. Oh, there's this little drop down here. Um, it's gonna be said to basic N Bar. We want the one that's called, see this little arrow here helps you drop it down. And we're gonna go to the one that's called, um, I want a fix top. So what I mean what, what that means is when I scroll down the website, it's gonna always be at the top and that's quite popular at the moment.
Uh, it might change. So if you just want a one that kind of slides up and down. Okay, watch this. Uh, let's go to, Can you see this? That one there is set as a bootstrap um, nav bar that stays at the top there. We'll try and do this as well where there is uh, um, a bit of transparency to the navigation as well.
So it slides up and down. So let's go and do that. So I want the nav bar fixed top. I'm gonna kick that one once. Now mine's gone into the right position because I um, I've got my cursor in the right spot. So I'm gonna go to edit undo.
Um, what you're gonna need to make sure is, um, if I have this text selected here, it's gonna try and put my nav bar in here. Okay? If I'm gonna have this image down here selected, it's gonna try and put my nav bar in there. So what I need to do is make sure, um, it needs to be right at the top of everything. And if you remember the tag, that kind of is everything you see on your page is the body tag. So I want it to be at the top there.
So the easiest way is to click anywhere and then down here in your tag selector, click the body and that'll get you in the right spot. Okay, now I'm gonna click nav bar fixed top and it jumps in the right spot. Now just to double check for yourself where it has gone and it has gone to the right part, I'm gonna go into code view, make sure I'm it, source code. And where is my body? There he is there. So there's my body opened.
Okay. And there's my nav bar starting. Okay. It's quite big, the old nav bar, okay, it does quite a few things. Uh, where is it there? So it starts there and comes all the way down to there 'cause it collapses and does all sorts of cool things for mobile.
So it's a little bit big in terms of code. You'll also notice this, this little thing gets added by Bootstrap, okay? Um, little style and 70 pixels. It's just so that it can push it down from the top. So there's a gap between your content. Well I'm gonna remove that later on 'cause I don't like it.
So first thing is let's go and preview it. I'm gonna use my um, down here I've been using, I've been switching between preview and Chrome and that's fine way to do it. Okay? It opens up a page and tests it. Whereas this one here, device preview and I click on this link here, it's gonna open up a browser. The good thing about this, I don't have to refresh it, I don't have to keep going back to uh, preview and Chrome, okay?
It's just gonna always be open and update as I work on it so I don't have to refresh it or anything. Now the problem with it out of the box is it's gray, which is not a big problem. We can change that. Um, the big problem is that can you see it expands to the edges, okay? It's in something called a fluid container, which means it'll always be the edges there and there's some really big screens out there. So you're gonna have a really strange looking, um, navigation that stretches completely across.
So I want to tuck it in 'cause remember our edge of our document goes to here. We've got these stretchy containers, the fluid containers that go to the edge, which are the color boxes. But we've got these internal nested and they're just called containers and they are the width of my, uh, large desktop here. And so I want to go and tuck it in down to that size there to do that, to jump back into Dreamweaver. What we need to do is if you click on your nav, there's one of these uh, classes in here that says, uh, container fluid. I need to go and find it.
Now if I click on it here, I've got the kind of parent one here actually and I've got one of the children tags. That's great. And there he is there, this one here called container fluid. So if you can't find it, you might have clicked somewhere else. You might have to go do this in code view. Um, but I can see mine there.
There's one called container fluid. So I'm gonna go and change that. Um, and I'm just gonna literally delete the word fluid. I know the container one is the nice, you see it jump to the edges here and now lines up with everything. I'm gonna jump back out to Chrome. Remember no need to refresh 'cause we're using that device preview and there is there, you see it lines up with everything.
Now it's the gray box still expands out. That's still set to fluid, which is great. Um, uh, but it lines up. Now the big thing about using a bootstrap, um, navigation is the lovely things it does with navigation when you get down to mobile. So we're gonna click hold and drag this in. Watch this.
You'll see it readjusts readjust. But when I get down to mobile, look what it does. It does our little lovely um, nav sandwich, um, our strappy lines here for navigation. So I'm gonna drag that back out. Okay? So it's done that automatically.
Now for me though, if I look at my Photoshop mockup, you see here, I've just got a logo on the site and two, um, text box, uh, two um, text links. So it's very simple. I don't need a lot of the stuff. If you wanted a dropdown, you'd keep the dropdown. Okay? I actually wanna get rid of the dropdown.
I want to get rid of search, I wanna get rid of these weird, I don't know why there's buttons over this side. But anyway, I'm gonna get rid of 'em all. I'm gonna keep brand 'cause I'm gonna replace it with my logo. Um, one thing to know is this search bar, it seems really easy. You're like, awesome, I've now got a search engine for my website. That's not true.
This is just the box that you could type in hitting submit, does absolutely nothing. You'd need then need to go through and set up, um, using a database, create, uh, a way of indexing and searching your website. That's a big deal. Okay? It's outside of the scope of this course. If you ever wanna do a quick search of your website, add a little search bar is there's a paid version of Google search, um, which allows you to, uh, remove the Google branding and you just, it's really quite good.
Google does all the hard work of the searching your website. It displays the results but doesn't do it within Google does it within your site. So you can kind of borrow their, uh, amazing search engine to use on your site. And it's quick and easy to get going. Anyway, let's first of all get the right buttons, then we're gonna go and style it. So to get the right buttons jump back into Dreamweaver.
Um, we're gonna use the tag selector. So I'm gonna click on this one here. Uh, here it is the dropdown toggle, um, dropdown. I just keep clicking through until I, you can see here I got back to this one called Nav, nav bar Nav, right? And that there grabs too much. I want to keep going down this tag until I find the one that's called drop down Open.
Great, I'm just gonna delete it. Awesome. Uh, the search box here, I'm gonna click inside of it. Um, you can see form control, uh, form group. And I go this one here, this one here is called, what's this one? Nav bar Form N bar, right?
Keep going up. That grabs too much. So there is what I want. Okay? That grabs everything on the nav, uh, in that selection up the top there. And this part of the take selector here called nav bar form.
Form bar left. I'm gonna delete it. You could be doing this in code view. I'm a bit of a design nerd so I like to do everything visually. Uh, drop down. I'm gonna get rid of as well.
So I'm gonna get rid of you. Get rid of you. You can see here actually I've gone up a little bit higher because um, the brand is left there. But this one here called Nav, nav Bar Nav, very confusing. Um, that is, um, there was a nav right on the side. This obviously the one that's on the left and I don't want any of these guys, so I'm gonna grab and delete them as a big group.
Now I'm back to having just my brand and my link. I'm gonna save it and I'm gonna preview on my browser and there it is. There. Not particularly exciting. We've taken away some of all the good stuff, but um, just double check that the mobile still works. You can see here.
Lovely, that link's still in there. Next thing I wanna do is I want two buttons over here. I've only got one at the moment. This thing called Link. So I'm gonna make sure, um, the nav bar right is the whole thing. The, this thing here called an ally.
This is a list item. So this is one of the navigation, um, options in the list. I can duplicate this Ally and get another button. So you could do this in code view or I'm gonna do it in design view. Um, I'm gonna make sure I've got my ally selected. I can right click it and go to duplicate or I could select it, copy and paste it.
That would work too. And I've got nice, uh, two little buttons now to work through. Um, we're gonna check this out and add a third one in co view just to show what it looks like. So I'm gonna go to split view so I can see both my source code and my design view. And you'll see it here. It's pretty easy.
Um, there is my nav bar, right? And these are the different options within it. And even though they look like a button, they're actually started life as a list and they've got some padding around it and to make them feel like a button. So I'm going to copy this and paste it and you'll notice up here I've got another link and you can keep pasting as many links as you need. And obviously the text here can be changed. And this one here is going to be called one of my Options.
I've got home and contact us. You'd obviously have a lot more. I'm keeping mine simple for this tutorial. Was it capitals? There was. So I got home and I got contact us and this guy here, I don't need.
Great. Next thing I need to do is the brand here. Um, it's just got the word brand. You can see I flicked in live view and here it is, there's a link called, it doesn't go anywhere. Remember that Hash it even Bootstrap uses the um, the hash or the pound sign, uh, to indicate a link that doesn't go anywhere yet. And we'd use this to maybe link back to the homepage.
It's very common to have the, obviously the branded logo linked back to the homepage instead of the word brand and delete that. And I'm gonna go to insert image. I'm gonna go to my desktop and find the dream of exercise files, find, uh, images. And here there's one called logo and I'm gonna kick open. Great. You can see he's put in there when maybe you put an image into your document, you need to make sure you put your alt text.
Okay, so this one's gonna be the bring your own laptop logo. Bring your own laptop logo and the link. I'd get it to go back to our index page. Um, so I'm gonna get it to link two. Um, I'm gonna click on this little folder here and I'm gonna say when the logo is clicked, it's gonna go back to my homepage all the time, correct? Uh, last thing I need to do is the size wise and it's too big to fit in here.
Now I could go back to Photoshop and resize it to make sure it's the perfect size. I'm just gonna resize it in Dreamweaver. This is probably not the best way to do it. And because I'm not exactly sure how big it needs to be just yet. So down here where it says width and height, so I've got my image selected, width and height, I'm gonna change the width to 200. And the height will come along for the right go away.
Little helpers. I'm gonna click the little tick, hit file, save all. And I'm gonna check it what it looks like in the browser. Okay, so it's getting there and you can see the logo doesn't sit well on this, uh, light gray. I'm gonna go through and change those things now. So let's go and look at doing some of the styling, um, and replacing the bootstrap styling.
Alright, so now we're gonna style the nav bar. What I'll do is actually is let's turn this into a separate video and we'll look at, uh, we're gonna look at something called the Code Navigator and how to kind of override our styles in this nav bar, just to make it a little bit shorter. This video.