Build Your Own Business Website header image

Help! My Slider is Covering Up My 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 demonstrate how to move a slider that is covering up the drop down menu by reviewing and changing z-indexes.

Video Transcript

Rick: Okay.

Member: Okay now, this one because I’ve seen this problem before, I know I’ve overcome it but I don’t seem to be able to do it now. Yeah, okay they want a you know, a picture at the top, I’m using your slider it’s lovely, I have to make the image smaller but that’s not the problem. Let’s just click on About Us just click on that one. Okay, now if you scroll over to “Why Support Israel”, you’ll see the dropdown menu and that those are all fine, they’re lovely but if you’re on the home page the image at the top will cover up the menu. Go back to home and yet, if you actually leave your mouse on that image on the “Why Support”, you will see a flash of the drop down menu. You will see it when the image changes.

Rick: And this is because we have a z-index issue.

Member: I’ve set the z-index for the menus to be much higher than the pictures. I’ve set them to be smaller, I mean much lower. You will be able to view it, obviously it’s in the menu bar. I tried doing it with the you know, dealing with z-index. The z-index for the menus are in the 200 something and the one for the images and the text that is superimposed on top, they’re 100 or less so that’s the…

Rick: I’m trying to find that.

Member: Yeah, okay.

Rick: Okay, z-index: 0; for the query item, okay and that’s actually happening inside of the plugin itself giving it a z-index of 0, z-index of 50. Okay, because the plugin itself is giving z-indexes.

Member: Which plugin?

Rick: The BX Content Slider

Member: Okay.

Rick: Is setting z-indexes.

Member: Right, to 0 and 50 and that’s definitely below the 200 that I’ve set the menu items to.

Rick: And so then, you have this “top_menu_area”, “page_wrapper” let’s see let’s just look at this, inspect the element. So then we have ul “sub-menu” has a z-index of 200 and then ul “sub-menu” li has a z-index of 200 and then li a, z-index: 200; let’s see, z-index: 200;

Member: I’m going to…

Rick: Wow, okay…

Member: What? You found it?

Rick: I don’t know.

Member: Okay. Yeah, I felt that what is it over…

Rick: Overflow hidden?

Member: Overflow hidden, I’ve tried overflow hidden, I’ve tried overflow visible…

Rick: It wouldn’t be.. I wonder if we have an overflow hidden on our top menu area, is there some reason why we would have overflow hidden on this? No. How about here? z-index of 150 okay, so there is the fix. Just change .menu z-index or just add a z-index for .menu of 150 or 200 or whatever.

Member: Okay, let me…

Rick: Why it didn’t work for the other ones I do not know but…

Member: Okay, let’s give it a try I’m doing it right now. Okay now, all right now there it is, let’s give it a try.

Rick: Okay, are we getting that… Have you already put that in?

Member: I did put it in.

Rick: Okay.

Member: .menu I put yes, I’m sorry and I put a.. oh no, I didn’t, I have a spelling error I’m sorry.

Rick: Okay.

Member: For some reason z menu doesn’t work.

Rick: Okay, I’m still getting the same… I still don’t have…

Member: Let me see if I get it.

Rick: Do you have some kind of a caching going on?

Member: No, no definitely not during development.

Rick: Okay.

Member: You want to take a look and see if it’s showing up? Maybe it’s not showing up right. Let’s see where you had put it and see if you’re getting it.

Rick: Okay well, it’s definitely… Did you put this inside of your custom CSS section?

Member: Yes, that’s the only place I would… I had a .menu, just .menu right?

Rick: That’s what I would have done, .menu

Member: Is z-index…

Rick: Okay, it’s not showing up…

Member: You know, I have found that to be very slow. I have found that it doesn’t show up immediately even though I don’t have caching turned on. Well, you know they arranged the hosting, they may have some caching turned on that I had nothing to do with so I’ll check on that but if it’s not let’s see…

Rick: Let’s see, so I just added it myself

Member: Yeah

Rick: and it works

Member: It works so I think that there’s some caching that’s going on that I will have to try and..

Rick: Now, really to tell you the truth I don’t know why it didn’t work for you with the other options that you used because it seems to me like the other options you used should have worked too but…

Member: Thank you. Well, I’m glad… I trust well it’s not working for me yet you know, I think that this is obviously an approach that will work.

Rick: Yeah.

Member: Once it starts paying attention.

Rick: Right, exactly.

Member: Yeah. I can see that it’s not showing up.

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