Black admin bar is being hidden by page elements


I all of a sudden noticed while building a new WordPress theme that the black admin bar is being hidden by the header element when you scroll down and I can’t fix it. I basically have a full width header with elements inside it like a logo and navigation etc.

However when I scroll down the black admin bar is pushed behind the header so you can’t seen it when you scroll down until the header element is off the screen. This means whilst you’re at the top of the page, none of the admin drop downs are accessible.

At first I thought z-index was to blame, but it’s much more tricker than that.

The admin bar has a z-index of 99999. The header element has a z-index of 70. I changed the headers z-index from 70 to 60 in developer tools and then scrolled down. It worked! Fixed it. So I thought. When I save the changes in the CSS and re-upload and refresh, the problem comes back with the new values.

So messing around with dev tools work, but as soon as you reload the page, it reverts to the issue again. I can’t find anyone else that’s had this same issue so I was wondering if anyone can help?

user67087 2 months 0 Answers 14 views 0

Leave an answer