- Read Tutorial
- Watch Guide Video
Last guide we implemented the basic styles for the home page but we still have a few more tasks that we need to complete in order to match the mock that we have here. So in order to do that the first step is going to be to take our links here for our navigation and then stretch them this way instead of having them on top of each other and to have you know the wrong styles and all of that. So let's go switch into Sublime Text here and I'm going to close out of our styles. We don't need those at the moment. And the other thing is right here we have our home with all of the HTML instead of our application and you can see that if you come over here and click say on about me. Once it gets going you'll see that those HTML styles only applied or I should say those HTML components are only active on the home page.
So if I hit refresh you can see that. Now we have this very odd behavior and that's definitely not what we're looking for. So that's going to be the other thing is we're going to refactor this so that it takes in the HTML components we need and puts them where they should be which is in the application layout file not just on the homepage. So first and foremost what I'm going to do is I'm going to take the items that are going to be specific to the lay out. So you notice that the way we have here what we have here is these three divs wrap all the content they wrap the Nav. they wrap everything else inside of them. And that means these belong in the application layer file. So I'm going to cut these and coming down. Well, so you get rid of these alerts. We don't need these here so I'm going to get rid of those right now. And now we have our divs. And if I come up here we're going to test everything inside of them and just to make sure we're good. I'm going to grab the divs that will close them out come down here and make sure these are all lined up and Sublime Text gives us a little bit of help with this because as you'll notice if I look I have these lines and these helped me stay in alignment here. So that's one thing you always have to be careful for. I've worked with students that have had some design bugs and many times that came down to forgetting to close out a div or something like that.
So that part is good. Now let's look at what else we need. So here we have this masthead this is a specific class called mastheads. So this is going to be something a little bit different than what our main shared nav is going to be. So this is going to have to be a special one. And I think the best way is actually to create something in shared that will be application underscore nav. And with this being the case we can actually get rid of our location top because we're going to have to create a partial specifically for this. So I'm going to copy this go to app and then views and then shared and coming down here. Let's Right-Click new file save _application_nav.html.erb.
Now we can simply take in all of this content here and then in this new Nav we can bring all of this in. And now we can put you can put your name over my name for the masthead brand and then these are our links. So these are each one of the links that we have in the app so I'm going to be able to pull those from the regular nav. And let's come fix the indentation. Here. And now we have our homepage that only has items that should be on the homepage. We're also going to have a footer that we want to share as well but we'll take care of that after our nav.
This is already starting to look better from a code organization standpoint. Let me open up the nav and let me. Open this up in its own tabs so I'm going to go to View layouts you're not. You can't see those on the screen because this is a much larger monitor that can't show that but in sublime go up to you layout and then go to two columns just so you can see the side by side. And I'm going to put Nav. over here and I have application now right here. So now that we have all of this we can see what we actually want here we what are we what we want our links to be. There you have home. So I'm going to copy this. And then each one of these Remember that a link_to generates this code. So this is something that's very important to keep in mind. And if you don't believe me that's perfectly fine. We can walk there and see how this actually looks. And if I go to blogs because this is one that still has a links if I come down and right click on new blog and that actually let me do it here since it's a little bit easier to see. Draft and then come down to inspect. You can see that even though we use the link to this actually generated an a tag. So from the HDMI perspective remember that Rail's can't read or that the browser can't render rails code but it translates that Rail's translates into this a tag for a link. So that is how the browser is able to know what a link is. So all we have to do is map that. We only have to do is say OK this is our home tag. And so this is a link to our homepage. This is going to be pretty much identical to what is here. So I can get rid of that. In fact I can get rid of all of these.
So I'm going to get rid of that one. And now what we can do is simply grab each one of these items. Now one thing that you can do and sublime that is nice and handy. You can if you click on one spot and then press and hold the command key you can come down and click on different spots and it's going to select all those items. And if you hit command + delete it will delete all of that for you if you come over here and do the same thing here. Now hit command shift and then the right arrow key you'll select everything to the right. And now I can just select all of the items that I want here. Paste them in. And that's a lot faster than doing it one at a time. Maybe not when you're having to explain it like I just did but normally that is a much faster process. So now you should have home, about me, contact, blog, and portfolio. Let's see if this is working.
So it might come back. And go down to home. This is starting to look better it's not perfect but it's starting to get there so we have home, about me, contact, blog, and portfolio. So what exactly is different. Let's take a look. Whenever you have something like this happen which will happen a lot where you have all of these items and it looks kind of similar to the mail that you're wanting to mimic but not perfectly. First thing I do is I simply come back here and notice how these have these classes. So this has a special set of classes and we simply need to bring these in. So I'm going to copy this nav link and the way that you can add classes to links in Rails is you can come right here and say right after the path and say class and then pass in a string with whatever class that you want.
So I'm going to copy this and then using the click command while holding down command select all these areas hit paste. Also we can we can close out this. I'm not going to save it because we may want to use this partial later on. Let me close that out and I'm going to hit command + Alt + 1 and that's going to switch it down to a single layout again. Now hit save and come back. If you hit refresh it will get that. Now we have much better-looking links and if I click about me or contact we still have the same layout.
So everything here is working perfectly. And it also even fixed the way that I remember before where it was scrolling up and down and it kind of had some distorted things. Well, we also fix that as well. So I think everything is coming along nicely here in the next guide. I want to implement our footer and then also our log in log out functionality so that it's actually up here on the right-hand side.
So let's come into the terminal take a look at all of the files that we updated. So we created a new application partial for nav and then updated the home page and the application file. So I'm going to add that they "updated styles for master layouts file." So you get push origin design and in the nix guide, we're going to knock out these other layout options for the master layout file.