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.
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.