Build Your Own Business Website header image

How to Center the Nav Menu in Thesis 2.1

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 we demonstrate how to center the nav menu in Thesis 2.1 by displaying it as an inline block and setting the page wrapper to text align center in Custom CSS. We also show how to undo this in media queries to take care of its responsiveness.

Video Transcript

Member: How would I center the entire… all of those nav menu links across the page.

Rick: You mean take the whole block and center in the space?

Member: Yeah. The way it is on, they’ve kind of moved them into the middle which looks nice.

Rick: Yeah. Well you have two options, I think probably the best option would be to set this here as display:inline-block;  and then set this page_wrapper to text-align:center; so that would look something like… and it means you’re going to have to make some changes also inside of the media queries as well but we’ll start with this. We’re going to come over to Style Editor and this is top menu area page wrapper. Actually, I’m just going to do that in Thesis, Custom CSS. The first thing we’re going to do is a{margin:0 5px} okay, that fixes one thing you’re after. The second thing is #top_menu_area .page_wrapper{ and that is going to be text-align:center;}

Member: Okay

Rick: and then on page wrapper first child ul #top_menu_area .page_wrapper > ul{ that is going to take, regardless of what you name the menu, that’s going to take that first menu and then {display:inline-block;} let’s see if that is the more reliable way of doing it. I was going to use the idea of the menu but you may have changed the idea of the menu and in that case, the code wouldn’t work for you.

So, if we do that and reload this. Okay, so that centered it.

Member: Very nice.

Rick: Now, this centering it though is a little problematic for  responsiveness.

Member: Okay

Rick: So we have to undo that work I believe. Yeah, we have to undo that work in the… well, I suppose, it’s probably okay. In the larger devices, specially, it’s fine…

Member: Right

Rick: And in that device, I guess it’s not really quite centered.

Member: They don’t look beautiful but…

Rick: So we want to undo this in the media queries then. The way to undo this in the media query, is to go over to Skin Design and we’re going to do this only in the tablet portrait media query and it should work it all the way down. So tablet landscape we’re going to leave alone…

Member: Okay

Rick: But then we’ll say… we’ll take these two things #top_menu_area.page_wrapper{text:align-center;} #top_menu_area.page_wrapper > ul{display:inline-block;} and paste them. In front of it, we’re going to say .agility, this way we end up taking priority over everything. In Media Query we always need to add the body class, .agility to your rule to make sure that this media query takes presence.

Member: Okay

Rick: And then, you would say… {text-align:left;} and this case, what you’re going to really do is {display:none;} Oh no, it’s not going to be {display:none;} I was thinking of the Thesis Responsive Menu. I think just {display:block;} let’s just see… not yet. Let’s see what do I have to do here in order to make that work. Oh, actually… turn that one off and that one off. Huh. It’s a good question, why is that shifting all the way over then? Instead of centering, now if I get rid of the margin, that does it a little bit.

Member: Is it not picking up the gap to the left? On that first menu item?

Rick: Well, theoretically, the way this is supposed to work, if we take out all of the customization for just a second… and reload it…

Member: Could you send me that code please?

Rick: I will, yes.

Member: So I could use it.

Rick: Yeah. If we take that all out and then while we’re at it, take out this… then… something odd is happening anyway even without that… It must not be getting the new order. That is very odd. I’m trying to isolate what is causing the odd behavior in the menu because this is not the typical menu behavior at the moment.

Member: Is it left align?

Rick: For example, there is a space here… I mean that is the typical behavior but I’m not quite sure why that stuff isn’t centered any longer. You know, I think I’m going to have to take some time alone with this and see if I can come up with a better answer for you. I’ll give you this code, because it’s close to working but not quite. I’m not quite sure… it’s not behaving the way I am expecting it to behave. If I just return this thing all the way back to its default. Then I come back over here and reload this… actually, something is not happening…

Member: Hmm.

Rick: Because I’m still not getting my… Since I restored the default so I should be getting that color all the way through there…

Member: Ah, yeah..

Rick: Let’s come back over to Design Options and just save the Design Options, that might also be part of the issue. Okay, so that’s what it should be looking like. Oh! Home was always there. I just didn’t recognize it for a Home because it’s all white.

Member: Oh, because it’s white (laughs)

Rick: So there was nothing wrong with that (laughs) Okay, yeah, it’s just the default color because once you make that thing transparent, the default color is going to make it go away.

Member: Ahh… so it was my fault! (laughs)

Rick: No, it’s not your all your fault but obviously, that was the thing… there was something odd going on, which means that this code works just fine.

Member: It actually works, yeah.

Rick: And I just put it in the chat window.

Member: Right, thank you.

Rick. Yeah. So, essentially what you are doing is… the code you’re using here is your… actually, instead of text-align:left; maybe text-align: something else is better, so let’s just… maybe text-align:normal; let’s just see what has to say about that. Okay, so text-align:center; right, justify and so text align has what properties? left, right, center, justify, align and inherit. So, left would be the one.

Member: Okay

Rick: So you’d have to text-align:left; to get rid of that centered. I’m sorry, you know I just want to try this one more time with that. I’m going to come back over to the Skin Editor, Custom CSS and we’re going to take that code and bop it in there. Then come over to Skin Design and we’ll say, Top Menu Area, transparent… we’re going to choose a different color scale so that out menu colors change. Then we’re going to come to this one… actually I’m going to leave it all alone for a moment and let’s just see what happens. If we look at it in its… okay. So, we’ve got that laid out like this and if we reload it. Okay, so Home, this is Home.

Member: … change the text right, if you… The text color for the live link will fix the…

Rick: Yeah, what we need to do is set, what is set right here must be the text is white and the background is transparent.

Member: Exactly, yeah.

Rick: And so that needs to be changed, and actually, I guess in Agility you don’t need to change any of the media query code. Changing the media query is necessary in Thesis Classic using this menu but not necessary in Agility so…

Member: I think that looks pretty good, actually.

Rick: Yeah. So, that was a really long way to answer your question, I guess. (laughs)

Member: Well, I’ve learned a lot in the process, thank you very much.

Rick: And actually, it might be… you want to return some background color to that so…

Member: Right. Well, in this site, it would probably be okay anyway because the entire background of the site is that color.

Rick: Right

Member: So it will be there as well.

Rick: Right. Okay!

Member: Great! Well, thank you so much.

Rick: You betcha. Anything else?

Member: That’s it. Thank you!

Rick: Okay. You bet! Have a great day.

Member: You too.

Rick: Bye, bye.

0 Comments… add one

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 comments… add one

Leave a Comment