search

getgrav / grav-plugin-lightslider

Grav LightSlider Plugin
https://getgrav.org
MIT License
14 stars 15 forks source link

z-index issue with enabled pager (overlaying the fixed menu bar) #34

Open SimJoSt opened 6 years ago

SimJoSt commented 6 years ago

Gravs standard theme has a fixed menu bar at the top with a z-index of 2. The pager dots have a z-index of 100 and overlay it while scrolling.

aoloe commented 5 years ago

Is there a workaround?

aoloe commented 5 years ago

resetting all z-index in my css seems to do an ok job...

/* reset the wrong z-index from the page slider */

.lSSlideWrapper .lSFade > * {
  z-index: auto;
}

.lSSlideWrapper .lSFade > *.active {
  z-index: auto;
}

.lSSlideOuter .lSPager.lSpg > li a {
}

.lSAction > a {
  z-index: auto;
}
aoloe commented 5 years ago

the patch above is not perfect: links in the slider are not clickable (hidden behind invisible divs)

aoloe commented 5 years ago 
/* reset the wrong z-index from the page slider */

.lSSlideWrapper .lSFade > * {
  z-index: 10 /* 9 */;
}

.lSSlideWrapper .lSFade > *.active {
  z-index: 11 /* 10 */;
}

.lSSlideOuter .lSPager.lSpg > li a {
  z-index: 12 /* 99 */;
}

.lSAction > a {
  z-index: 13 /* 99 */;
}

/* reset the z-index from the nav */

.mobile-container {
  z-index: 14 /* 2 */;
}

.mobile-menu {
  z-index: 15 /* 3 */;
}

.mobile-menu .button_container {
  z-index: 16 /* 100 */;
}

.overlay-light, .overlay-dark, .overlay-light-gradient, .overlay-dark-gradient {
  z-index: 0 /* 0 */;
}

with the quark theme, the mobile navigation is now on top, the slider is behind it and its links do work.