Search code examples
cssz-index

Cant figure out stacking order issue on Chrome

My collapsed dropdown menus are being hidden behind a sequence.js slider on Chrome and Safari. Issue doesn't appear to be happening on Firefox. Tried changing z-index on just about every object related to slider and menu. Much love to anyone who can inspect my site and tell me what I am doing wrong.

https://www.shopinspired.co/

Solution

  • It's not actually being hidden behind the slideshow.

    This is due to the "sticky" class being removed from your header when you scroll to the top of the page. If #header always has .sticky, the menu shows fine.

    It looks like your styles at the top of the page are targeting "header.sticky", not just "header".

    Fix: Manually add the css:

    #header {
  position: fixed;
  left: 0;
  right: 0;
  top: 0px;
  box-shadow: 0 5px 5px -5px #333;
}

    or change the CSS in the page head to target "header".