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.
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.
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.