I want to apply my valid custom admin bar color scheme to front-end toolbar.

I am using this code to do it:

function () {
        array( 'admin-bar' )
} );

However it causes some strange bugs.

For example, when I hover a button it is colored with deep blue which is ok. But when it loses hover for 1 second it changes back to original color cheme (black background and blue text color).

enter image description here

enter image description here

I guess this is happening because of the default admin bar stylesheet:

<link rel='stylesheet' id='admin-bar-css'  href='http://neuralnet.info.loc/wp-includes/css/admin-bar.min.css?ver=4.8' type='text/css' media='all' />

But I can't turn it off because whole toolbar layout gets broken.

So how to properly replace admin bar color scheme in front-end?


I did look in admin-bar.css and it seems that it is a bit different from back-end admin bar...

2 Answers 2


You make it the wrong way.

First, you do double work. Enqueue inside enqueue. You don't need wp_enqueue_scripts():

    array( 'admin-bar' )

Second. Don't use anonymous functions with WordPress Actions. Once-for-all-time is OK, but while the project is growing up you can collide with the inability to dequeue that style when you'll want to.

The solution.

Make a copy of the admin-bar.css and correct it to fit your needs. Then minimize it using any tool you can google for (optionally).

Dequeue the original admin bar:

add_action('admin_init', 'my_remove_admin_bar');
function my_remove_admin_bar() {

And enqueue your new-laid my-admin-bar.css

Slight hitch. You can face the problem when the whole admin bar gets updated to the new look with the new WordPress version.

  • Thank you a lot for answer! One more question. I did put wp_enqueue_style in wp_enqueue_scripts because it is done in Twenty Seventeen Wordpress theme. Why did they do so?
    – CMTV
    Jul 18, 2017 at 10:48
  • May be because of dependencies. If so, keep double enqueue as is for sure. Better safe than sorry (береженого бог бережет).
    – Max Yudin
    Jul 18, 2017 at 10:58

This might be useful to you. The Admin Bar has some fairly specific CSS because it has to ensure that it's not accidentally overridden by theme CSS, which is why the post I linked makes heavy use of !important.

When deliberately trying to override it you need to be more specific and cover each of the states an element has styled by default otherwise it will fall back to whatever the default styles are.

  • sorry, but link only answers are not answers at all Jul 18, 2017 at 10:36
  • Expanded it a bit.
    – Chris Cox
    Jul 18, 2017 at 10:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.