In this guide, we are going to give our blog a new navigation component. If you're building this for your own portfolio then you can treat this completely as optional. If you like the navbar that is there now it's perfectly fine to keep it. I personally have not been loving it lately and I also want to show you how easy it is to integrate a completely different navbar by just sliding in some new styles. If you go to the bootstrap site and go to (https://v4-alpha.getbootstrap.com/components/navbar/) This is going to show you some of the different styles that are available. I'm going to use a little bit of a cross between a few of them and I'm going to walk through how we can build that out. But this will give a good starting point for you if you're looking to build out a new navbar as well.

Let's come into Sublime go to the blog nav partial. Right now this is pretty basic and I'm going to give ourselves a little bit of room here and now I'm going to start building out a new navbar. I'm going to say nav and inside of it(I'm not going to use these statements yet) but I've built out a set of classes and combination of classes that I really liked. Let me bring those in. I'm going to say...

<nav class="navbar navbar-toggleable-md navbar-light bg-faded blog-nav">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-
  target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle 
  navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="container">
    <%= link_to "Jordan Hudgens", root_path, class: 'navbar-brand' %>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto">
        <%= nav_helper 'nav-link', 'li'%>
        <%= login_helper 'nav-link' %>
      </ul>
    </div>
  </div>
</nav>

This is just going to bring in the same blog nav style that we have right here. With this in place, I want to first implement a button and I'm going to actually bring in something that I have already put together here and let me come and remove these little plus signs and I'll walk through what it is. But I really don't think that you wanted to watch me type all of this. Let's talk about what each one of these items are. This is a button that is going to be the toggler for when we get into a situation where the page is being accessed by an iPad or iPhone. This is kind of talking a little bit to, responsive design and different things like that. This is the first part of it. What we can do is create a set of components inside of this and that's where our other items like our nav-links are going to go. Let me create a div here. I'm going to give a class of container and this is where it starts to get into some of the more custom items that I built out. First, I want to add a brand and this is something that if you look at the documentation you'll see anytime they have something like this. This is usually associated with what they call a brand and a navbar brand class. That's all I'm going to do for the first one. I'm going to create a link_to, I'm just going to put my name. I'd recommend you putting your name over my name right there that might make a little bit more sense. For class, we can add that same little navbar-brand class. Ok, let's just see where we're at right now, see if this is absolutely horrible or if we have something at least that is workable. Start up the rails server. Let's take a look and see if we are on the right track or not. Switching over into the browser, hit refresh and Ok this is starting to get there this isn't perfect but as you can see this is a much more muted kind of navbar which is actually what I'm going for. Then we'll also have to do some things like give it some more padding or some more margin down at the bottom. But this is a little bit more of what I want for my own personal blog. So far so good. Also, you may note because we did class container. This is wrapping the brand where I want it to be and I'll wrap the rest inside of here as well. So far so good. Coming down let's add another div. Here I'm going to say class and collapse, navbar-collapse and this is going to have an id of navbarSupportedContent. I did not just make that name up I promise. It's actually mapped to this up here. What this button is going to do is it is going to be mapped and it is going to select everything inside of this div. When you press on it it's going to pop down. This is only when we are on small devices though so notice right here. This navbar-collapse for md means that it's only going to happen when the device shrinks. Now that we have that we can build in a tag and say class and navbar-nav and this one is mr-auto that is also something just provided by bootstrap. Now what we can do, I'm going to get rid of these tags. Now we can use our cool helper methods. Coming inside of this we're going to use some embedded Ruby. I can say nav helper which is one of our helper methods pass in a class of nav-link and then a type of . Remember that is where we provided the tag type. Here we can implement our login helper. This one is just going to be a nav-link. We don't have to pass in the tag type. Ok, let's see if this works I believe this should be everything that we need, hit refresh. There we go. This now has a new set of items, has a totally new header and now it is showing each one of the items including logout and those things that we want. I'm going to click on this and now if I shrink this down. Notice how it centers my title or my name here. Then it gives us our cool little toggle right here and if I click on it everything drops down. This is a part of building with responsive design. This is something that ships with bootstrap which is very nice. If I pop this back in and it slides out to a wider width, now it shows each one of these items so that is good. Let's click inspect and select the nav bar like we have right there and if I come in and I want to do a margin-bottom let's see if this is the selector we'll need. If I say 40. Perfect, that's nice. Let's see if I do 30. That looks ok too I think either one of those would be perfectly fine.

Now that we have that, that's going to be our blog nav class. Popping back in here. Let's see where we have our blog nav, if memory serves me right I believe that this is a custom one that we created. Let's see. No, it doesn't appear that it is. I'm first going to scroll down see if we have anything custom for our navs and it doesn't appear that we do. We should be able to add some margin by doing this and we say margin-bottom: 30px;. If I hit refresh this should work, theoretically. Let's see, there we go. Now we have the right kind of margin here. One thing that is still bothering me is this font is absolutely horrible. But don't worry, if you look at pivotal tracker you can see we have custom fonts. That's going to be one of the last things we do. But as far as the blog header and navigation looks I'm liking it. One thing to also notice if you click on any of the topics you can see that this is now populated to the topics as well. Hopefully, you can see how easy it was to completely strip out and then slide in a new navigation system. This is something that if you would have built your code and not use things like partials it would've been much more time consuming and it would have been harder to isolate these type of components. But because we used partials, we had good code organization and we separated out each one of our components as well as possible. It makes it pretty easy to make some pretty broad-reaching changes like this.

Coming over to pivotal tracker I'm going to click done on new blog header. In the next guide we're going to work through how we can add a source tracker. Remember the source tracker is something we built a number of modules ago that tracks if a user is coming in and they use a custom url that you give with a special tracking link. Well, we haven't really done anything with that in a while and it's because I was waiting for styles. Now that we have them, I'm going to implement our tracker so that it's right here. If they go from one blog post to another blog post the little thing that says (hi I saw you joined me from Facebook) will be right here. Then also on the portfolio, I want to call it and we're definitely going to have to fix these. Don't worry, that's on the list too. I want to have a little alert up here that says 'hi I saw you came in from Twitter or wherever they came in from'. We will update that in the next guide. Let's see all the files we changed here. We only had to change two. That's pretty cool. We created an entirely new nav style component and we only changed two files. I think that is a sign of good code organization. Here we can say "Added new nav bar styles for blog". I can say git push origin final-changes and we are good. I'll see you in the next lesson.

Resources

• Source Code