Build Your Own Business Website header image

How to Prevent the Thesis Navigation Menu from Being Covered by the Multimedia Box

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.

This member asks how to prevent the dropdown elements of the Thesis Nav Menu from being covered up by the content in the Multimedia Box. In his situation a YouTube video covers up the drop down menu items. I demonstrate how to add the z-index property to the menu to insure that it stays on top.

Video Transcript

And the 2nd question you asked was, “How can I make my drop down menu go in front of my feature box?” And oh yeah, you know, the short answer is using the z index value. I’m going to put a bunch of pages under Mom Resources so that goes down in front of… oh, well actually, this is my feature box here. So I’ll put a whole bunch of them under Services here really quickly and then… I think this is a WordPress menu, isn’t it? Yeah, okay. So let’s just say we will… 1, 2, 3, 4, 5, 6, 7… add to menu and then we’re going to put all of those under Services. Let’s see, come on now. Behave, for heaven’s sakes. Let’s see… controlling the environment, beat the living daylights out little buggers… oh I guess that’s not one of her suggestions.

Okay so then we save the menu, go back over to the menu of the page. And so then here under Services… oh, look. It did go in front of the feature box. Well so, the next thing to consider here would be the z index value, Philip and you can set the z index value either in the menu itself or in the feature box. The z index value is the part of CSS that essentially kind of gives it 3 dimensions and in particular, what it does is it allows one thing to overlap another. And so, if you look right now, this already does have a z index value. I selected that and if we just scroll down here looking for what the default z index value is… let’s see… well, okay. Z index is in here someplace. Oh well, maybe not. Maybe it isn’t in there. Inspect the element, okay well so the thing to do then with this would just be to increase the z index value of menu a. And you can learn more about this z index value at the w3schools.com and then we go to CSS and then if we look at let’s see… where is the index? We’ll just look here for a second. CSS property and z index… so, if you made the z index 10 for example, it’s probably greater than the feature box. And it could be that you’ve inserted something in the feature box that has its own z index and so you may have to you know, make the z index 100 or something like that.

You were wondering about the drop down menu looking funky in Internet Explorer. You know, Internet Explorer does have a way of mangling a little bit the javascript especially expanding and contracting and hiding. So for example, on my site here you know, the reason why this has a background color is without a background color, it looks absolutely hideous in Internet Explorer. Internet Explorer, for whatever reason, with a background color here, it looks relatively normal. It doesn’t look exactly the same as this. It’s not nice and smooth as this is but because this is a javascript function and because earlier versions of Internet Explorer mangle this you know, javascript accordion function, it may have something to do with that. But I’d really need to see a link in order to figure that out.

So Philip, what I would suggest you do is post a link on the forum to the specific menu that you want me to look at and I’ll jump on it and see if I can help you figure that out. Okay, let’s see. Actually, he has put it here. If I can grab it… okay, let’s just open it up then.

Well first, let’s just open it up in Internet Explorer. Okay, so it would be www.assmq.org. Okay so here’s an example where this YouTube video stands out over the text here and I think what I would try to do is in fact, set the z index value of the YouTube back. You know, I don’t see any particular difference here otherwise though. It seems like it looks just fine in Internet Explorer to me. If we come over here to this one, okay. Yeah, I see. So it’s in Internet Explorer that the z index doesn’t work. Yeah you know what? I wouldn’t be surprised actually if Internet Explorer has a problem with the z index.

Let’s go back to w3schools for a second. Let’s just look and see. Oh no, it’s supported because we automatically get a doc type with WordPress so it should be supported in 98. So then in that case, what we just do is we would give this thing a z value. And so that is… oh really, just custom menu a. If you did .custom .menu a and then said z-index: 100, that should automatically make this thing stand out in front of the… automatically step out in front of the… and cover up the YouTube video. So I would go ahead and try that. I will add this code although I’m sure you understand this. I’ll add this code to the website later today but really, it’s just adding the z index value.

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