Build Your Own Business Website header image

Thesis 2 – Troubleshooting Menu Styling

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 troubleshoot menu styling in Thesis 2. The submenu isn’t taking the same styling as the main menu and there is an extra border. We review the code and show how to fix the problems. We also show how to give the submenu an absolute width in the Custom CSS to give even spacing to the widths.

Video Transcript

Rick: Are you trying to work on this menu thing?

Member: Yeah. I’ve been still struggling with this and so, I mean I think I’ve come a long way, let’s say, I’ve learned an awful lot for the last little while but I feel like I’m getting a bit lost actually in that, I think because I’ve created some new packages for this menu just in part of the header, I’ve called it the Top Menu and I haven’t been out to make the styling in the top menu to make it repeat itself in the submenus and also, there’s that blue line around the bottom of each, I’m really going to have to discover how to get that fixed.

Rick: Okay, so the blue line here on the bottom, this is coming from a package that is styling .menu so if we look at your CSS file for a second, we’re just going to look down here till we find something that is styling .menu, here we go. So we’ve got this .menu so I believe what this is probably is just the standard Thesis dropdown menu package and somewhere down here, you have a border specified in it. Yeah, right here so you’ve got a border specified in your menu package that says it’s 3 pixels wide on the left and stuff like that and then border width and border style, you just need to get rid of all of that.

Member: I can’t seem to find it, I guess that’s the issue, I’m not going with that one.

Rick: Okay, well, why don’t I make you the presenter?

Member: Okay. And the thing with clouds… quite what’s happening there but I’ve got it…

Rick: It’s fine now.

Member: Yeah, I got it in development mode and I’ve got it on pause hopefully and I purge all the caches that they have …

Rick: Okay, and don’t ever turn that back on until you’re 100% done with your site.

Member: Right.

Rick: There’s absolutely no reason for you to have it on until you are 100% finished with your site and ready to go on and do other stuff.

Member: Right, okay.

Rick: Okay.

Member: So maybe I should delete it from the system all together for the moment then?

Rick: Well, as long as you have it paused and…

Member: Yeah.

Rick: That, I think you’re fine unless it turns itself back on. If it turns itself back on, then yes.

Member: Yeah, it topples back on off to 3 hours or something or some of it does. I need to talk to Bluehost anyway and I’ll find out about that but it’s off for the moment. Okay, so again to Skin Editor here.

Rick: Well, you need to share your screen though, you haven’t done that yet.

Member: Oh yeah, (03:16) help in that.

Rick: Okay.

Member: So what I did was I created this &top_menu_supplement to style the .menu.

Rick: Okay, well, hang on just a second though. Just let me look through your, scroll down a little bit so I can see…

Member: Okay…

Rick: No, no the far side. I want to see all the rest of the packages you have. That’s not the one that shows me your packages.

Member: Let me get rid of this in a moment. Let’s see… here we go

Rick: Okay, so click on your Top Nav Menu package, right there in the middle.

Member: That one there or?

Rick: No, the one down below it towards, keep going down, further down, there you go, that’s the, yes. Click on that one. See this is the one where you’ve got the border called, it’s the selector is .menu. If you open up the options there, there are border settings, if you say none.

Member: Okay, so that’s not for the edges of the menu items, it’s for the menu box, is it?

Rick: Well, it can be for both of those things but this right here, is controlling that line. If you turn that off, just say none and hit save, that border line goes away.

Member: Okay.

Rick: Okay?

Member: But it has gone away on the submenu now.

Rick: Well, okay but you want to style the submenu similarly to the main menu, right?

Member: Correct, yes.

Rick: And so, if you go back over to your Skin Editor and show me that top navigation now, the one that you created, it’s right there near the top. And maybe that’s not it but let’s just look at it for a second to see. Okay, top nav yeah, that’s not it, go ahead and hit cancel. There must be another supplemental, down below there’s another top nav menu?

Member: The top menu supplement, this one here?

Rick: Okay, we can take a look at that one, that might be it. No, well okay go ahead and let’s just look at it, “These styles only apply to”, go ahead and open that up. You know, if you uncheck that box, “Apply these styles to top level menu items only”, it’ll now apply to both, go ahead and hit save.

Member: I thought it was one or the other.

Rick: Take a look at it.

Member: You don’t have to save the template each time, do you? Oh, okay brilliant.

Rick: No.

Member: Oh, fantastic. Okay. Just unchecking the box, that simple.

Rick: Yeah, if you want to specify, I’m a little surprise that the width didn’t follow with it but you could probably specify a width that’ll go along if you want them all to be the same width. Now, however, with padding, try and select, “What is Hypnosis?” from that menu item. It worked, okay. I was concerned that the space between each one of those things would be a problem but obviously, it isn’t, okay.

Member: I haven’t done with those other pages yet.

Rick: That’s fine. So if you open up that supplemental menu style.

Member: So we’ll get that too, yup.

Rick: I think it gives you the opportunity to set an absolute width. Yes, menu item height and width, down a little bit lower. Okay, you must have something overwriting it then, go ahead and hit cancel.

Member: Okay.

Rick: And look at the top sub menu submenu package.

Member: Okay.

Rick: This maybe something we can just delete all together, go ahead and go to Options. You know, I would go back to the package and I would delete this package all together.

Member: Okay.

Rick: Because you’re not using it.

Member: Yeah, you gave some advice about header submenu, right now it wasn’t in the header.

Rick: Right. Actually, go ahead and save your CSS so I can look at this myself on my computer.

Member: Okay.

Rick: Okay, I’m going to make myself the presenter here for a second.

Member: Okay.

Rick: Okay, so what I want to do is discover why. Interesting, something is overwriting that width so you know, you could I guess probably the easiest way to solve that one at the moment would be just to give some menu a an absolute width and so, that would look something like, let’s see. I’m not going to delete that yet, yeah, I’m going to delete that. That would look something like a #top _nav and then .sub-menu a{width:140px; and then probably you want to say text-align:center;}. You may need to adjust this a little bit but well, you know, I guess you probably don’t want to say text-align:center in this case. Sorry, I take that back. But if you put in your custom css, that will probably solve it and I’m going to post that in the chat box for you.

Member: Okay, and where do I put it?

Rick: I’ll make you the presenter again.

Member: Okay.

Rick: I would just put it under custom css, I wouldn’t …

Member: Okay, I’ll just try to do that, okay.

Rick: Right. So just open up custom css there and paste it and you should be good.

Member: So I wonder what styling it at the moment then.

Rick: Go ahead and save CSS. A more general style is styling it at the moment so we’re just getting more specific here. Yeah, it’s perfect now.

Member: Well done.

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