Creating a Navbar

Quick reference

• 00:04 In this video, I wanna create a navbar using Bootstrap.
• 00:07 So already we have the beginnings of this navbar, but it's just a couple of links.
• 00:12 It doesn't look very good.
• 00:13 Let's look at Bootstrap and see what they have to offer.
• 00:16 So go to getbootstrap.com, click on components.
• 00:19 Look through the list and we see navbars.
• 00:22 So here's the basic navbar.
• 00:24 And that looks pretty good.
• 00:27 So let's just go ahead and click Copy to copy all this.
• 00:31 Now, we want this to show up on every single page of our app.
• 00:35 So we wanna add this to our application.html.css file
• 00:40 right up here where our old links were.
• 00:43 So I'm just gonna add some space and hit Ctrl+V to paste all this stuff in.
• 00:47 Now if we hit Save, come back click Reload.
• 00:50 Boom, we have this navbar just like that.
• 00:53 But we need to get rid of these links and we need to customize this a little bit.
• 00:57 So first off, let's change this brand.
• 01:01 So this looks like a whole lot of code.
• 01:03 And it could be overwhelming,
• 01:04 especially if you don't have any experience with HTML.
• 01:07 But, that's what this is, this is HTML.
• 01:09 So if we just kind of look through here, I can see right here, here's a link.
• 01:13 And it says brand.
• 01:14 Let's change the brand to Pinteresting.
• 01:17 Save that, click Reload, done.
• 01:20 So next, I wanna get rid of all of this other stuff.
• 01:23 So let's look through here, and
• 01:25 the first thing is let's get rid of this search thing.
• 01:29 We won't be needing that.
• 01:30 Let's go look through here.
• 01:32 Search.
• 01:33 Okay, form.
• 01:33 That's what that is.
• 01:34 It's a search form so I'm just gonna highlight all of that and click Delete.
• 01:38 Save it, come back, hit Reload, gone.
• 01:41 Now let's get rid of these links in this dropdown.
• 01:45 Here we see dropdown.
• 01:48 When I click on it here, the closing tag also highlights, so
• 01:51 that's how I know what to delete, right?
• 01:56 And also this looks like it can go.
• 01:59 So let's save that, click Reload, okay, so that's gone.
• 02:03 Now, let's get rid of those two links right there.
• 02:09 Save that.
• 02:10 Okay, looking good.
• 02:12 Finally, let's get rid of this dropdown on the far side here.
• 02:15 So I'll scroll down and let's see.
• 02:18 Here we go, dropdown.
• 02:22 Save it, reload.
• 02:25 Now we wanna replace this link with these two links.
• 02:29 So I'm just gonna come up here and copy these and delete them.
• 02:36 And then come down here and find this link.
• 02:38 And I'm just gonna paste these guys in there.
• 02:42 Actually, let's put the Home page link on top.
• 02:46 So you can see this is an old link, but it is inside this <li> tags.
• 02:52 So that means we should probably wrap our own links with the same <li> tags,
• 03:00 and then finally let's delete that guy.
• 03:04 So if we save this, come back here click Reload.
• 03:07 We have our Home page, our About Us page.
• 03:11 And this guy doesn't go anywhere, it's giving us this hashtag, so let's fix that.
• 03:15 Come up to where it says Pinteresting.
• 03:19 And for now, we could just do that, or
• 03:22 we could create a link_to tags so let's try and do that Instead.
• 03:27 So let's use our embedded Ruby = link_to.
• 03:33 Let's name this Pinteresting.
• 03:37 We want it to go to the root_path.
• 03:40 And notice here we have a class.
• 03:44 You do that by class: and it just copies what it says there.
• 03:52 Finally we wanna close our embedded Ruby tag.
• 03:56 And then let's delete that and click Save.
• 04:01 Hopefully that worked.
• 04:03 Yes it did.
• 04:04 Go to About.
• 04:05 Go to Home.
• 04:06 Awesome.
• 04:07 So how did I know to do this class brand thing?
• 04:12 Well, if you go to the Rails API,
• 04:16 like we did earlier, and
• 04:20 type in link_to, click on this guy.
• 04:25 And you just kinda read through here,
• 04:27 I learned how to do that by going through these examples.
• 04:30 See right here class, you can also add an ID, and other things.
• 04:35 So from time to time you're always gonna wanna go to the API and
• 04:38 just sorta look up things.
• 04:39 Now, like a month from now when you're building your own app,
• 04:42 that's completely different you're gonna forget how to do links.
• 04:45 And you're gonna go, how did I do that?
• 04:46 I don't remember exactly the format for a link.
• 04:49 Well, then you'll come back to the Rails API and type in link,
• 04:53 you'll be like, what was that, link something.
• 04:56 And you'll see, link_to, and then you'll remember and you'll click on it.
• 04:59 And that's sort of how you'll go when you get started.
• 05:02 Right there we have a pretty cool navbar, professional looking.
• 05:05 It's sorta standard looking navbar, you see this on most web pages.
• 05:08 And that was just as easy as copying and pasting and then deleting some stuff.
• 05:12 And that's all for this video

Lesson notes are only available for subscribers.