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.