Build Your Own Business Website header image

How to Make Two Line Menu Item in the Thesis Navigation Menu

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 discuss how to create a two level navigation menu in Thesis Site Options and then use some HTML and custom CSS to add style to the menu title.

Video Transcript

What I’m going to do is I’m going to show you how to create a 2-level navigation menu so that you can have text you know, like a big piece of text above and a small piece of text below. And we’re going to go to Site Options and select menu style. No, select pages here and I’m going to go ahead and select that one and let’s see, I think what I’m going to do is add a little bit of text to this too. Well actually, I’m just going to show you.

The way to do this is to use some HTML. So if you use the br tag and then start here, this is going to create a 2nd menu level. I mean, a 2nd… oh I can’t spit it out. Let’s see, let’s just add that br tag here and I’ll show you what I mean. I’m a little tongue tied at the moment. If we save this and we come back over to the site and refresh it, you can see now what I have is this is 2 levels tall right? Start here and content page that displays the category archive and then of course this whole thing is too long to actually fit in here.

And so, that’s how you make it 2 levels tall. Now what I’m going to do is I’m going to make it so the bottom level is a different style than the top level. And the way we do that is by… let’s see, again, using some HTML. But what we’ll do is we’ll use what’s called a span tag and span class = menu-sub. And then we’ll go to the back of this and close this span tag. And I may just as well as grab that, come down here, that span tag now. Well in fact, let’s do that here too and then we’ll grab…okay.

So now we’ve wrapped span tags around the bottom piece of text and we’ve split them. Okay now what we’re going to do is we’re going to take that, we’re going to add some custom CSS to this then to style that stuff.

And so, the first thing we’ll do is make all this stuff centered so .custom .menu a and we’ll say text align: center. It always works if you spell it right. Okay and then we’re going to say a .span and what we’ll say is let’s see, what is that stuff called? We’re going to say that it is a letter spacing and text transform so we’ll say letter spacing: none or normal and text transform: none. Okay, I don’t think it’s that, is it? No… that’s what it is. Yeah, it’s not actually a class so you don’t put the a there. You just put it… I’m sorry, you don’t put a dot in front of it because it’s not a class. So it’s just a span tag inside of custom menu a and then we could say here, let’s say padding left with 20 px and padding right: 20 px. And then height colon… let’s call it 30 px.

Okay so now you have you know, these things all set up like that. We could probably even say font weight: bold and then come down here and say font weight: normal. It’s not normal, it’s font weight… oh, maybe it’s normal. It’s just a semi-colon. That’s it, font weight normal and obviously, we’ve got a little subscribe button problem so we can say 19 and 19 or just let it go with that.

So that’s how you can you know, add a little bit of style differentiation on your menus. Split it up using a br tag and then once you’ve done that, add a span tag around the bottom piece of text and you can you know, change up with custom CSS the way that stuff looks.

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