So now, we're at our plugin. The first thing we're going to do is learn how to stretch that menu bar across the full width of the page. So the first thing is simply to take care of our general settings so in terms of our location, we're going to make it above the header. In terms of the menu style, we'll make a single sidebar. In terms of the nav menu alignment, we'll leave it left and we are going to go ahead and turn on our layout guides. We'll just hit save, come over and take a look at the result.
Okay so there is the layout guide, this little image here. Each group, each large line is 100 pixels. Each small line is 20 pixels so you can see, looking at this menu right here, this is just a little over 400 pixels wide. And I've got 1, 2, 3, 4, 5 menu items and I need to take it out to about 1000 pixels so we are looking at adding 600 pixels worth of width to this menu in order to make it stretch all the way across.
So one thing we could do in order to do that is simply to give our menu a background color. So what has background color now is our various tabs but there's no background color for the rest of the menu. If we wanted to, we could come over and just add background color. And so we would do that here with our menu bar background setting. Let's see, obviously, it's not red but you know, if we picked red or pink for a moment, you'll see what the result would be. It fills it all the way across. Now, it also goes above because of the way this layout guide is in place. If we turn that layout guide off, you won't see that space above the menu any longer and it would be as if it was the same color all the way across. So if we wanted to make it the same color as the rest of our menu, we could come over to Design Options, down to our menu and grab this link background color. And then go back over to our nav menu and then instead of that pink, we put in this color here and refresh it. And now the menu looks like it's that whole width, right? So that's one way of pursuing it.
However, if you want to really stretch it all the way across, what you do instead of that is to essentially widen each one of these things. Then you widen them by adding padding to either side. And so, the way that works is under this category here called menu item width. Now in menu item width, you'd set your typical menu left and right padding and so let's say our typical left and right padding is 50 pixels. And then what you do is you keep on adjusting this until you're very close and then you could use the first menu item to finish that adjustment. So if we hit save here and come back over look at that, we just added 50 pixels of padding to both the left and the right side of each one of these menu items. And obviously, it didn't get us all the way there and if we are to... if we put our layout guide back in here again, we can use that to help us figure out how much more we needed to go because we need... we're at about 780 pixels and we need to go to 1000. So we need about 200 and a few pixels and so if you divide that up between 1, 2, 3, 4, 5, we need about 40 pixels per element or 20 pixels per side.
So if we just did that, if we come back down here to menu item width and instead of 50, we say 70, we're going to come very close to hitting our target. You see, we've got about 20 pixels left. Now we could then add say 8 or 9 pixels to either side of this one here or we could add a couple of pixels to the whole thing which is probably a better idea here. 1, 2, 3, 4, 5, we've got 20 so if we added 4 pixels to each one or 2 pixel to each side, that would probably get us really close. So instead of 70, do 72. Well, that was too much so this drop down, if we take that down to... I think in this situation, what I would do then is rather than go to 72, I would take this back down to 70 and then I would just bump this up say, to 75 and this is just going to make the first one a little bit larger but make all the rest of them the same and then I would call that good. We can easily turn our layout guides off now. Hit save, refresh that and the color extends all the way to the edge just like you want it to and it looks like it's evenly spaced about the whole thing and so it looks as if it is. In fact, stretched across just like this does.