A member asked how she can center her Thesis Navigation Menu. We look at adding margins to the individual menu items to get them spaced correctly. Next we look at 2 methods of centering the navigation menu. The first is to explicitly set a left padding to simulate centering and the second is to set the width of the menu and then set the margins to auto.
[This post contains video, click to play]
Video Transcript
Rick: Okay well on that happy note, we’re going to bring Kim online here and we’re going to let Kim tell us about her question. So Kim, are you there?
Kim: I am here. Can you hear me?
Rick: I can’t hear you at all. I mean, I can hear that you’re talking but… you need to turn your volume back up again.
Kim: Okay, no problem.
Rick: While she’s doing that, the question that she asked was about navigation, padding versus margin. How do you center your navigation? Is that right?
Kim: That’s right. Can you hear me now?
Rick: Oh, perfectly.
Kim: Okay. So I’m doing my brantlers.com and I’m having trouble with padding versus margin ‘coz I want the top navigation sort of centered between the antlers on my… I want it to center a little bit more and so I was having trouble figuring out the padding versus margin. I know those…I don’t know.
Rick: Well, what are you trying to add padding to?
Kim: Well, I have to add padding to…
Rick: For example… right now you have a bunch of let’s see, it’s not much of a brantler.
Kim: Oh stop it.
Rick: It’s more like a hookler. Oh there you go.
Kim: There you go, there you go.
Rick: Okay so…
Kim: I just… I don’t probably want as much padding…
Rick: Okay. And I guess I would have centered… I mean, I would have put the same amount of padding on both sides so you’ve got… oh no, you’ve got padding left, padding right 0 margin top margin bottom margin left. So yeah, you know, I generally would have the same margins on both so margin right 65 pixels. Don’t even need a calculator for that one. 65 pixels and 65…
Kim: Haha.
Rick: So you know, now the text is centered inside of the element and then if you want this to be centered so like products is directly over this, is that what you’re trying for?
Kim: Yeah, I just wanted less space between the buttons and I just wanted it centered. That’s right.
Rick: Okay so if we put 20 pixels and 20 pixels in between… so it’s down… is that too little?
Kim: That’s… no, no. That looks good.
Rick: Okay and so you know, you’re going to hate this but this is what I think is the best way to do it and that is .custom UL .menu and then adding left padding to that. Padding left: 200 px. Okay, let’s see..maybe I want 300.
Kim: Okay so you’re just centering… you’re centering the actual UL instead of…
Rick: I’m centering this element right here – UL class menu and I’m not really centering it. You can tell, right? I’m just adding padding to the left of it.
Kim: Right, right. I got it.
Rick: I tried to answer this question…a similar question to this last week with a margin left auto margin right auto and it didn’t work. Do you remember that? Or were you there?
Kim: Yeah.
Rick: What I’d failed to do is… Brian pointed out to me was that in order for that to work you know, this needs an explicit size. So you could give UL menu an explicit size say, let’s just try that. Let’s give it a width of 500 pixels or how many pixels is that thing for the moment actually? What do we got here? 450 pixels. So if we give it a width of 450 pixels…okay, let’s give it 500 pixels and then we say, margin left:auto; and then margin right; auto. Look at that, it did! And Brian is absolutely right. You know, so the only trick to this is just getting the width down correct, right? It’s probably not 500 pixels. It’s probably you know, 460 or something like that.
Kim: That’s brilliant, okay.
Rick: So that’s another way of doing it but you know, the way I do it generally is just assigning a left padding to custom UL .menu.
Kim: Okay, thank you.
Rick: It’s totally inelegant but it does the job. Okay, thank you Kim. Talk to you later.
Kim: Thanks.
Rick: Bye bye.