Black admin bar is being hidden by page elements

Question

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?

Answer 1

The styles for the admin bar are generally printed in the head of the site, so perhaps your CSS code is being undone as the printed styles for the admin bar appear after your included style sheet.

Maybe by using the wp_head action you can stop this, placing something like this in your functions file may do the trick:

function modify_admin_bar_css() { ?>
    <style type="text/css">
        #wpadminbar {
            z-index: 99999;
        }
        /* Plus any other styles you may need to add for the menu */
    </style>
<?php }

add_action( 'wp_head', 'modify_admin_bar_css' );

Alternatively you can try to use the !important declaration in your CSS, like so:

#wpadminbar {
  z-index: 99999 !important;
}
/* Plus any other styles you may need to add for the menu */

Note though, using !important in CSS isn't generally advised so you should always use this sparingly.