Working on finishing the mobile view of this site, pretty much there but having an issue with the nav display on horizontal and vertical phone view.
The menu buttons are displaying below other elements.
I’ve tried playing around with the z-indexes but hasn’t managed to fix it yet.
Anyone see where I’m going wrong?
We would need links to your read-only page to confirm.
My suspicion is that you are setting z-index values on buttons, or things within a container, and not on the container itself.
z-index is a little strange in that those values are ALWAYS relative to whatever container they are in. So, if you’ve got a navbar element z-index 0, even if you set a button within the navbar to z-index 9999, they will still get covered up by any other element on the page with a z-index of 1 or higher.
I hope that makes sense. Basically, check your button’s highest parent element and see what your z-index is there, and that is likely where you’ll find your problem.
Thanks @Cricitem, I’ll have a look at that.
And damn, shared the wrong link there, here’s the correct read only link (I’ve edited the original post too)
Unfortunately I can’t help, because my browser is throwing up whenever I go to anybody’s read-only link.
I had some joy adjusting the z indexes of the parent elements but the nav menus are still showing up below some of the other elements on mobile views.
Anyone have any idea where I’m going wrong? Read link here
The main issue I see is that you’ve got Advisory Right with a z-index of 1 and Advisory Left with a z-index of 0. You’re doing this because you’ve got Advisory Left filling the screen and Advisory Right coming on top of it in order to be visible, but your navbar is INSIDE Advisory Left, which means it inherits the overall z-index of 0, which is below Advisory Right, and all of its contents.
Your element structure is out of whack, which is the main reason you’re having these problems. A simple solution would be to duplicate your navbar element and make one visible only on desktop, and the other only visible on mobile, and move the mobile version OUT of the Advisory Left element, then assign it a high z-index.
Thanks a mill. You solved it. 
I wasn’t making the connection that the nav menu was on the left side, or background, and that’s why it was coming in on the lower z-index.
On the desktop view it’s nice to keep a nav on each left section so that it animates in and out in total synch with the parent element, but on mobile with the hamburger that isn’t needed, one is enough to sit as a fixed element outside and on top of everything else, and I can just hide the other navs on the individual pages for mobile.
This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.