Build Your Own Business Website header image

Indicating the Current Page on the Thesis Nav 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.

A member wants to indicate on her customized navigation menu that a visitor is at the current page in the menu. Thesis has settings for this and they are set by default. She has replaced the Thesis default background colors with a background image. She has also attempted to add a background image to the current condition. We look at her CSS and determine how to make it work.

Video Transcript

Rick: Okay so let’s see, the next question we have is Pam and Pam has a question about her navigation menu. And let’s see, let’s turn on Pam. Okay. So Pam, can you hear me?

Pam: Yes. Good morning, Rick. Can you hear me?

Rick: Good morning, how are you doing? I can.

Pam: Good.

Rick: So let’s take a look at your navigation menu and see what it is you’re talking about. I think actually… okay, give me the name of the site again.

Pam: Mmlibrary.org.

Rick: Right. Okay so you have this stunning site, right. This is really a beautiful site and so… and you have this little navigation bar. What is it that you want to do that this doesn’t do?

Pam: Well, for instance, if you click on Inspiration on the Nav bar, what I’d like to see for the user is some indication that that’s where they are. I’d like on the Nav bar for Inspiration, to be to stay that same hover color so that the user knows where am I on this site.

Rick: Okay so by default, Thesis has 3 states. It has a link state which is the standard state. It has a current state which is where you are right at the moment and it has a hover state. And right now, you have 2 definitions – you have a definition for a current state or a link state and you have a definition for a hover state but you don’t have a definition for a current state. Now the easiest thing to do would be just to change the text color.

Pam: Okay.

Rick: You could do that just from Thesis Design settings or Design Options. You know, if you come over here to the Nav menu, you could easily tank the current link text color and give it a different color and that would mean that that you know, that could be your indication. Or you could do this which is… the reason I don’t…I mean, I think hover should be separate from your current setting. But if you wanted to set the hover and the current to the same, I’ll show you how. Okay and so right now…oh no, let’s go to Inspiration. Oh, that is the blog page. Inspiration is the blog page. Okay, let’s go to the Reference page then instead. Okay so right now, Reference is the current and if we look in header area and page and menu, you can see that this is the one we’re talking about right now. Tab2 current and if we select that, we can look at the see which… what’s controlling that and what is controlling it is .menu .current. Interesting.

Pam: I’ve tried to define current in my css file but…

Rick: Well I would probably just… no. What I would do here is let’s see…where is your hover condition? Green nav menu is that what we’re looking at? Okay, it’s this one right here. So there is your…oh, well there is your current. You do have a current.

Pam: Yes, that was what I was having trouble with.

Rick: Okay so then the problem here isn’t…the problem here is that we don’t have the right selector. Now, somebody recently just showed me this really cool trick. By right clicking on the element, you can copy css path and then you could paste the css path in here to see exactly what the exact path was to that element. And so in this case, it’s HTML body .custom div header area .full width framework div .page UL menu LI tab a and this is a really…what you really want to get at, I think…that really help as much as I thought it would. UL menu LI…I think if you come back over here and say .tab current: a. Oops, just lost it. Current, not colon. LI tab current… it’s .current a. Oh, that’s still not it. I’m just going to get rid of the UL here. I know it doesn’t matter but .menu… I’m going to get rid of the LI also. Okay so what happens… okay so if you use the nav light gif here for that… I must have… nav h light. Okay so now you’re… so this was the selector you had to pick. .custom .menu .current a to get what you want… to get the selector you want. And I could tell that from this here, it was… the relationship was .menu .current a and then .menu .current a hover. And so you know, the main one is really…this is the main one, right? No, no. I see, you put an LI in here, that’s fine. The main definition is UL .menu a, that is the definition that controls everything unless something else kicks in. And so what we’ve just done here is we have…so you could put UL back there actually. UL menu current a and if we’re going to follow through on what you’ve got up here, you could do LI current a… no, that didn’t work. But maybe… yeah, okay. So it was an LI…yeah, that’s right. It was the LI class current and so you could also use this designation for it and if you use this designation, it would be you know, it’s really the analogy of this designation.

Pam: Okay.

Rick: This is your standard, the way you’ve got it defined is your standard and all we did was, we added .current to the LI.

Pam: Great.

Rick: To get this effect.

Pam: Okay. Now, I’ll tell you it was something that’s better and makes more sense than current but that’s wonderful. That’s what I was missing.

Rick: Well, actually this makes total sense for current. There’s nothing wrong with this designation at all for current. It’s just fine. I’m talking about the selector, that’s fine. Absolutely, you know, maybe a darker color or you know, maybe I’d stick with white… stuck with white but you went bold. Also… I don’t know, font weight… not that you need any advice from me on this because your stuff is looking beautiful but you know, maybe that… something like that. I don’t know. But it’s nice to have the hover be different than the current.

Pam: Okay, well I was talking about that. Would you look at my Inspiration page and then the sidebar, look at what I did on the hover and see if you think that’s helpful or is it distracting? Scroll down a bit for… you can see in the sidebar that part that says “Heartlight”. Hover over that. Yeah, so you hover over the…

Rick: It’s a little distracting because it jumps.

Pam: Okay.

Rick: Right? I mean that’s mainly what I don’t like about it but…

Pam: What would you suggest as a good way to…when you hover, to put out to somebody to you know, to remind them that they can click on that? What would you do?

Rick: Well, you can change color when you hover. You’ve got an underline. If you only use underline for links, you’ve got the underline and you’ve got the cursor=pointer. I think that that’s probably good enough.

Pam: Okay, that’s great.

Rick: But you could change color or you could go from regular to bold or you know, something like that. I just wouldn’t jump…I just wouldn’t make this space jump.

Pam: Okay, thanks. That’s really helpful.

Rick: Okay? You’re welcome. Okay, let’s see, so who else has a question here? Okay so, Kim suggested to our conversation here that you change the color, not the size and that you keep the underline. I think that’s a good idea.

0 Comments… add one

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
THIS IS A LIMITED TIME OFFER!
Subscription Options
0 comments… add one

Leave a Comment