CODEWITHSUNDEEP
cssz-index
Adam Bell
Adam Bell

Reputation: 1045

z-index woes: Can't get navgational drop down to appear above slider

Got a weird one because in some cases, it works and in others, it doesn't. I'm currently wrapping up a site and on this page (http://panchosrestaurant.com/drinks/beer/) there's an issue when you rollover the 'Drinks' button. A drop down appears, as it should, but the graphic frame which is the last element of my RevSlider is appearing above it. Went to Inspector and it says the z-index for that element is 5. Fine. So I tried to make the ul, li, li a, all sorts of different elements a 6 or much, much greater and yet the frame continues to appear on top of it. Where am I going wrong? Am I targeting the incorrect element?

Upvotes: 0

Views: 65

Answers (4)

wahwahwah
wahwahwah

Reputation: 3177

Just add z-index: 999; to your .main-navigation li class:

.main-navigation li {
   margin: 0 14.1px;
   margin: 0 0.88rem;
   position: relative;
   z-index: 999;
}

[Edit]

As @Michael P pointed out, the z-index only needs to be at 506 to trump the `.tp-static-layer' class

Upvotes: 0

Michel
Michel

Reputation: 28289

Your element with class tp-static-layers has a z-index of 505...

You have to put a z-index of at least 506 on the dropdown element <ul class="sub-menu"> to win. Or refactor some of your styles.

Upvotes: 1

Matthew
Matthew

Reputation: 932

Without seeing your code i would assume all you need to do is to apply a position to the element you want to be over z-index: 5

Upvotes: 0

Justin Drury
Justin Drury

Reputation: 748

In the CSS block below you should set the z-index to something higher than 505, which is what your image border is set to.

@media screen and (min-width: 769px)
.main-navigation ul li:hover > ul, .main-navigation ul li:focus > ul, .main-navigation .focus > ul {
  clip: inherit;
  overflow: inherit;
  height: inherit;
  width: inherit;
  z-index: 100;
}

Upvotes: 0

Related Questions