• Registered: 2015-06-10
  • Posts: 17

Topic: Stacking - z-index problem [SOLVED]

Hi everyone! I'm having trouble with the stacking order of a menu and a juicebox gallery. Whenever I want to click on a submenu item which is over a gallery, the submenu disappears and I cannot click on it. I have already set the menu z-index at 9999 but it still doesn't work.

Any help is much appreciated. Thanks!

the website is www.adrianmueblesinfantiles.com.uy

  • Registered: 2012-04-24
  • Posts: 5,904

Re: Stacking - z-index problem [SOLVED]

The problem is likely to be that the z-index value is not being applied to the correct elements in your menu.
If you could provide the URL to a page which demonstrates the problem, I'll take a look and see if I can find a solution.
Currently, the web page whose URL you provided has two lots of (the same) embedding code but the gallery does not display because the path to the 'juicebox.js' file is incorrect.
I realise that you might not want a dysfunctional web page live on your site but I'd really need to see the problem in order to troubleshoot it so perhaps you could create a test page somewhere on your site that is not linked to from anywhere else.
Thank you.

  • Registered: 2015-06-10
  • Posts: 17

Re: Stacking - z-index problem [SOLVED]

Thanks for your prompt reply, Steven!

You'll be able to see the problem in this page.
http://www.adrianmueblesinfantiles.com. … orios.html

When you navigate the "Productos" submenu, and you get to the last items that overlap the gallery, you can't click on them because the menu disappears.

As to the index page I posted before, no gallery was meant to appear there. The juicebox codes I had were only an example I had to apply to other pages :)

Hope you can identify the stacking problem now. Thanks!

  • Registered: 2012-04-24
  • Posts: 5,904

Re: Stacking - z-index problem [SOLVED]

Thanks for the link.
There are quite a lot of z-index values in your 'style.css' file and it's not easy to see exactly which elements are going to be stacked on top others but it looks like just removing z-index: 100; from your #header CSS (on line 110 of your 'style.css' file) might be enough to solve your problem.

  • Registered: 2015-06-10
  • Posts: 17

Re: Stacking - z-index problem [SOLVED]

Great, Steven. I'll try removing the z-index 100 from the header and review the others. Thanks so much for your help!

  • Registered: 2012-04-24
  • Posts: 5,904

Re: Stacking - z-index problem [SOLVED]

You're welcome!
Hopefully you'll find that it works fine (as it does when I try it in my browser's developer tools).

  • Registered: 2015-06-10
  • Posts: 17

Re: Stacking - z-index problem [SOLVED]

I removed the z-index from my header and found out the right @type for my web at schema.org Now everything is working just fine :)

Thanks!!!

  • Registered: 2012-04-24
  • Posts: 5,904

Re: Stacking - z-index problem [SOLVED]

That's great to hear!
Thank you for letting me know.