Build Your Own Business Website header image

How To Make a WordPress Menu Span the Full Width of a Page

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

In this session, a member would like to know what he needs to do to make his navigation menu go all the way across the edge of a page. We explain that that there are two options to achieve this and both require modification to a CSS file. The first option is to add padding to the left and right side of the page and second is by giving it a fixed width. We show how to do it by simply inserting some CSS code.

Video Transcript

So your next question was how to make this navigation menu expand all the way across the top of this. Is that right?

Absolutely. I’d like to make it like the menu… sorry to talk over you. Just like the menu on your website, byobwebsite. You have a nice navigation menu which fixed the width of your page and it’s just not clear to me what I need to do to get those tabs to go all the way across the edge of that page.

Yeah and so, you have 2 options here and let’s see, I’m going to open your site up in Firefox. Both of these options require modifications to your custom CSS file but if we edit CSS here, go to the custom page and let’s just start down here at the bottom.

There are 2 options. One of them is to add padding, left and right padding to each one of these tab elements and it just widens them by adding space on the left and on the right. The 2nd option is to give these tabs a fixed width. And so you know, the exchanging your coins and the fact would be the same width and you would just divide the space up by the width you’d need in order to make that work. Those are really your 2 choices. I’m going to show you the first choice first.

If you right click on this and say inspect element and then look at it inside of Firebug, you are using the WordPress style menu, not the Thesis navigation menu. Is that right?

Yes, that’s right.

That’s what it looks like.

The reason I chose that, just so you know, is that I wanted… when you click on About us, I didn’t want that to be a selectable page. I wanted it to be a non-selectable page and just a heading that points to the pages below that. And from the you know, looking up the information on your website and various forums, the suggestion was to go out with the Thesis menu. I used the WordPress menu and then used the hash side.

Right. And so the thing is that the Thesis nav menu has a different HTML structure than the WordPressnav menu does. And so, the answer to this question is different for the WordPress style menu than it would be for the Thesis nav menu and I’ll give you the answer that you need rather than the Thesis nav menu. But the concept is still the same. It’s just that the selectors are different.

And so what you need to do is you need to address this… actually, what you need to do is address this a because that’s where the styling really happens for the menu here. So you want to address the a of the LI of this UL and you really only want to do that with the immediate LI because you don’t want this change to affect the drop down menus. You only want it to affect the top level menu. So I’m going to show you what I mean by that.

So if we… let’s see. We are going to say… do you have any other menus or plan on using any other menus in the site?

Not apart from that main navigation menu, no.

Okay so we can just say .custom .menu and then have the immediate child which is the greater than sign, the immediate LI a which is… so what this is doing is and in fact, let’s just make it a little clearer. Let’s add the UL to this.

So for the UL .menu which is what this menu is and what it would also be if it was a Thesis nav menu, for UL .menu, you want the immediate child LIs, not the subsequent children LI. Just the immediate child LIs and you want the a elements of that immediate child. And then what you would just do is say padding-left: 10 px. Oh, not z, x. And then padding-right: 10 px. I think that’s probably what we have right now so if we did 20, okay. It’s not happening. What did I do wrong here? Custom UL .menu LI a and that currently is this padding right here. Yeah custom menu… well, maybe I do need to remove this. Maybe that UL is a problem. Just for grins, let’s put it up at the top of the code just in case there’s an error up here.

There it is. You’ve got an error down here someplace in your code which is throwing off…which is rendering this code invalid. I mean, it doesn’t work because of the… because there’s an error in here someplace. So you’re going to want to open this up in an error checking text editor, code editor, so you can see where the error is.

Like NetBeans.

Exactly, just like that, yeah. And so anyway, we’ll just keep the code up at the top here and it could be custom menu LI a, that’s fine too. And so you’ve got left: 20 pixels, right: 20 pixels and let’s see, let’s make it… let’s try 30. I think that’s probably too much but… no it’s not too much. Okay, 35? Okay, 38? I mean, you just do this little game, right?

Well, if you keep playing with those pixel quantities…

Until I get to where you want it to be.

Thank you. I’ve come an awfully long way in a very short space of time, Rick. You know, I didn’t know anything about CSS a week ago and I’m sort of learning you know, on a very steep learning curve. But that initial command, .custom .menu and then you’ve got the sort of the less than sign and LI a, I don’t understand that last bit. I understand what .custom .menu means but it’s the bit after that on the same line, the LI and the a.

Okay well the LI is the list item. It’s an HTML element. This menu is an unordered list. That’s its HTML structure, it’s an unordered list and unordered list is specified as a UL. So when it’s written, it’s put inside of a div, give it an UL and then each item inside the UL is called a list item. So Home is a list item, About Us is a list item, Our Rates is a list item. Oh, look at that. That didn’t work. It didn’t limit it to the immediate LI. Maybe I need to make this one immediate also, immediate parent immediate child. Yeah, that’s what it was.

And so, you could actually do this, just like this without that symbol. So it’s custom menu LI a and it effects every subsequent LI and a that is inside of the class .menu. And this the concept of inheritance where as it sits like this, every a that is part of an LI anywhere inside of .menu gets padding left and padding right like this. And that’s because of the way we wrote the code. We wrote the code to say inside of the class of .menu, every a that’s part of an LI like this.

Now what I next though was because I didn’t want it to happen to these because these are also LI a’s and these LI a’s are LI a’s of a UL that is essentially a submenu. So you have the main… this UL submenu is part of this LI. This LI doesn’t have its closing tag until after this submenu is closed. And so, this submenu, this UL is a nested list inside of this list and if we leave it like this, this LI will be affected by this code.

Now what I wanted to do was I wanted to make sure that only the immediate LI was affected. And so, this symbol here means immediate child. In the absence of that symbol, it’s every child. But this symbol here just means the immediate child.

I see.

And the same thing is true here then. We have the immediate child of the immediate a of the immediate L of menu. And so now it’s the top level LI and its top level a and this is no longer affected by that.

Hopefully in time, this will sort of come to me more easily than it is doing now but you know…

Well, inheritance is not… I mean, inheritance is kind of a complicated subject and you know, I’ve got a really long lesson on inheritance and specificity in Thesis specifically using the Thesis nav menu as a reference for that. And I believe that is chapter 6 or Lesson 6 in the Customize Thesis Like a Pro tutorial series. That’s really where I talk about the concept of the CSS cascade and inheritance and specificity.

Okay.

It is a complicated topic.

Yeah, I’m just surprised that you know, there is so many websites that have navigation menus like the one that you very kindly just done for me. I’m surprised that it’s not made easier like sort of a drag and drop thing because this seems to be you know, delving quite… I don’t know. Maybe it’s the novelty factor that’s bamboozling me at the moment but it seems to be quite a technical thing you know, a technical piece of code to write in order to accomplish quite a simple thing.

Well actually… and the thing is that the Thesis nav menu makes it easier for you to do this. Remember I had said that we were doing this because you’re using the WordPress menu. If you were using the Thesis nav menu, it would be quite a bit simpler and I’ll show you what that looks like here but I want to save this code before I do that.

So I’ll paste that code here and then we’ll come over to another site. Let’s see, this is the site here and this one does use the Thesis nav menu and in this case, these are called tabs. So the top level menu item can be addressed by simply using a custom menu tab rather than the immediate child and immediate parent. And anything that you assign to tab will not follow through to the submenus and the rest of that stuff.

So for example here, .custom .menu .tab and then padding left: 10 px. I think I got the wrong… okay, tab… oh LI. Okay I’m having a little… okay, padding right: 10 px and then let’s say 30 and 30.

And so you know, it’s a little bit easier to reference the menus and subsequent submenus under… I don’t actually have any submenus here so you can’t see it but sequent submenus under these things in Thesis because Thesis assigns a universal class to these LI items that WordPress does not assign. And that universal class is the class of tab.

Okay, I see.

So it’s… I mean, when you understand in heritance in the immediate child issue then I mean, it’s just one more level of complexity so for me it doesn’t really matter one way or the other. But this concept of addressing only the tabs I think is probably conceptually a little bit easier. However, it’s not available to you because you’re using the other menu and the other menu has its benefits.

Okay so I just need to get my head around inheritance and specificity, if I can say it properly.

Yeah although… I’m going to post that code to the site at the end of the session. So under Live Question Answer code, on the forum… so you can just grab that code and muck about with it a little bit. Obviously, you have to change it every time you do something, right? So it’s not automatic. There are actually some plugins out there that will automatically span the whole thing for you. It’s another level of you know, complexity for the code and it makes it more difficult for you than to customize it otherwise but there are other ways of you know, there are plugins that will do that too.

I mean, I think this is relatively simple if you do it just like this. Just add the padding to the left and to the right. The alternative here is rather than doing this is to just give it an explicit width. So you can say width: 200 px. Okay, that’s too big but let’s say 150 for a second. It’s not 1500, 150. Okay, 140. There you go, sort of.

If we turn off the subscribe, it would work a little bit better and in this kind of a situation then you know, you could say text align center and you could also specify height so that they were all the same so like I don’t know, looks like about 40 pixels, something like that…. 35, 30… yeah.

So you know, this is also a way of doing it in a way where each button is exactly the same.

That’s great. Thank you very much.

So those are really your 2 options. Now, if you were going to do this on your site, we come back over to here and instead of custom menu tab a, we would just do that. Well in fact, in this case, this would probably be great just as a LI because each of the drop downs will be the same width although you would want to take the height out of this. You’d probably want to take the… yeah. So again, you’re going to deal with inheritance here and you’re going to get rid of the text align center for that and then what you would say is custom menu UL LI a for those. So you get the width the same… no. Custom menu LI a custom menu… oh let’s see, inspect the element.

Okay well actually, you could, right? I suppose you’re right. You could do this, not menu but submenu. Custom submenu LI a width… okay, fine. We’ll go back to the immediate child. There you go. So this part just affects the top and you know, maybe you just want to make that at 34 pixels. Give yourself more of an even space there. So that just affects the top and then this one here sets the width for the bottom so that they are… and actually, if we wanted to, we could maybe make it… we’ve got 1, 2, 3, 4, 5, 6. That’s probably about 44 pixels. Okay, let’s call it… I think 50 is going to be too much. Yeah, 48. There you go and then change this one for 48.

And so now you have a you know, a system that goes all the way across.

Super.

I’ll post both of these pieces of code to the website when we’re finished today.

That’s great. It’s like private tuition. Thank you very much.

Absolutely. You’re welcome. Happy to help.

0 Comments… add one

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
THIS IS A LIMITED TIME OFFER!
Subscription Options
0 comments… add one

Leave a Comment