Build Your Own Business Website header image

Upgrade a Thesis 1.8.5 Site to Thesis 2.1 Using the Classic Responsive Skin – Part 5 – Style the Thesis 2.1 Classic Responsive Menu

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

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.

One of the things that we want to do in this upgrade from Thesis 1.8.5 to Thesis 2.1 is change the background color because all the background color is transparent. And we want to go from orange to that brown in our nav menu. From this color to this color. Otherwise, everything else is transparent or white.

Set Background Color to Transparent

We’re going to take .menu .current-menu-item a and give it a background color of transparent. We come back over here now, I can’t get all the code there. And I’m going to say Menu Styles or a little notation to that effect and then we’re going to say .menu .current-menu-item a background-color: transparent. In fact, this is also going to apply to just .menu a and .menu a:hover, so that should get rid of all of my background colors; we’ll see in just a second. Yes, it does.

Set Text Menu Color

Now I want my text so .menu a text color and .menu a needs to be that orange. So, .menu a color: and we’re going to grab that color there, that’s the variable. So .menu a color is that and then .menu a:hover is going to be that brown; and instead of $color3, that is going to be…Color 1, color 2, color 3 and then font, auxiliary, subhead, auxiliary, text, links that’s it. Oh no, that the same #F47300; #F47300, so it’s not links. It is something else, it’s $text2; that’s what it is.

Okay, so .menu a:hover color:$text2. In that case she was using .menu .current-menu-item a and she was using a grey color as I recall. I think it was that primary text color. So now we’ve used these variables in our code and if we change our variables it will change the references in the code as well.

Move the Nav Menu inside the Header

Let’s save our Custom CSS and refresh this. That looks about right. What’s going on above it, header, menu, main menu; something is adding an extra space coming. Let’s go to manage or Skin Editor for a second and let’s add the Nav Menu inside the Header, down there.

I’m going to drag Site Title and Site Tagline out. I’m in a wrong template of course so I’ve got to go back to my Front Page template. Drag it in there and down, save that template and let’s see what we look like now. Hmm, it didn’t change anything. That’s an interesting little conundrum.

Oh, there it is right there and that is coming from margin-bottom: 36px so we are in fact going to give .widget .header_widget a margin-bottom of 0px. Okay, come back over to Custom CSS and we will call it .widget .header_widget and then margin-bottom: 0px. Okay, that should get rid of that extra margin.

Set Font Size and Style

Perfect, now if we look at our font-size here; padding-left, padding-right, she’s got a little bit of extra padding and her font-size is 14 and she’s using Century Gothic.

So let’s come over to Design and pick our Nav Menu. And oh, look at that, we don’t have a Century Gothic. Okay, we’re going to leave it there but we’re going to make it 14 pixels. That did bring it up a little bit. And then, she’s got a little bit of left margin on the main menu itself and then left padding of 15 pixels and right padding of 25 pixels.

So that’s what we’re going to do here. We’re going to give ul main-menu a left margin of 25 pixels and then we’re going to give menu a some padding, and it’s 0.75 top and bottom. So menu a and we’ll start off with this one, id=”main-menu” or “menu-main”. Come back over to Custom CSS, back down to our menu; #menu-main padding-left: 25px and then .menu a padding-left: 25px; padding-right: 15px. Okay, that looks about right.

We’ll take a look at using a different font than Century Gothic. So, does Google have something like Century Gothic? It looks like if I want to get that we’ll have to buy that so we’ll come back to that. But we’ve got our header done and our menu styled and our menu placed and it looks like it should.

0 Comments… add one
0 comments… add one

Leave a Comment