In this session we show how to have different styling for a second menu in Thesis 2. This second menu is the same menu used as the main one, just with different styling. We add the main menu again in the footer and style it with a new horizontal dropdown menu package.
Member: I just want a basic menu in the footer for you know, ease of navigation. And I want it to be different than the header menu. I think that’s a css issue but I can’t figure out what to do to make it look different.
Rick: Is this Thesis 2 or Thesis 1?
Member: Thesis 2.02.
Rick: Okay so you’ve created two different menus though, right?
Member: No, it’s the same menu.
Rick: And you want it to be the same, you just want it be style differently?
Rick: Okay perfect. So I’m going to over to Thesis… this is probably not the right skin actually. I’m going to come over… we’ll go back to Thesis and go back to the default skin. We might as well update it too. Okay and then go to the Skin Editor and so let’s say we’ve got… what menu is this here? Oh yeah, this is the responsive menu. I’ll take that out for the moment. So drag that one out, we’ll drag our Nav menu back in. Oh and it’s in the container.
So I’ve got the one menu here above the header and it’s got a class of menu. Now I’m going to create a new menu box and I’m going to call it footer menu. Oh pardon me, that’s not where I want it. Just footer menu. And I’m going to drag it over to the footer and then I’m going to give it a class of footer menu. And it’s still going to be my main menu so both of these menus are the same.
And actually… okay so there’s my…
Member: Yeah, that’s what happened is when I took out the menu class, that it no longer was horizontal. It became vertical with the list bullets.
Rick: Exactly. So the thing to do… first off is to create a new menu style for this. So if you go over to CSS and you create a new horizontal drop down menu package, add the package, call it footer menu, give it the reference of footer menu and the class of footer menu. And then just place that reference in the list, now here’s the menu. Now it needs to be styled so that it doesn’t you know… so that it spreads out and that kind of stuff or whatever you want it to be. I mean, in this case, let’s just say that we want that menu, the footer menu… come over to our options and let’s do padding first. Let’s say we’re 10 pixels of padding in each place.
And no border but let’s give our link… we’re going to give our link color white and our background color red. And our hovered links will stay white but our background color will be blue. And we just hti save to that. You know, now we’ve got our menu here except they didn’t turn white. And that must mean that there’s some custom styling here that is overwriting the menu. So what I’m going to do is I’m going to make it more specific and well… I’ll show you what I mean by that.
If we come over to the html for a second and look here at our footer, we’ve got an id of footer so I’m going to put this id of footer in front of the class of menu when I… over here in css. So now that I’m in css, I’m going to take my footer menu and I’m going to add #footer space. So now whatever was controlling the menu before is now being overridden because… see, the thing that was causing the problem is that there’s some code for links that are referencing #footer as their selector. And so that is more specific than just footer menu. And so that makes it take precedence. But now that we’ve added that to the list, now this is more… this takes precedence.
I wasn’t prepared to describe that so I think I’ve been stumbling around a little bit. But what you have is if you look over here at the footer package, you see the footer package is #footer. And under additional css, they’ve got a footer a and they’ve given it a color and then footer a hover a color. And that’s what was controlling the menu before I added… before I combined this, the div id footer with the menu footer or footer menu.
Well, I mean that’s essentially what it is is that you create a new class. You add another nav menu in, select the same menu, put that nav menu where you want it, create a new class for it and then create a new menu package for that class essentially.