i added a menu to admin bar menu but it's style doesnt work;it looks like has default style

 <style>

     .my_menu_item_class{
        color:red;
         background: yellow;
    }  
     </style>
 <?php   
    add_action('admin_bar_menu', 'add_toolbar_items', 100);
    function add_toolbar_items($admin_bar){
        $admin_bar->add_menu( array(
            'id'    => 'my-item',
            'title' => 'My Item',
            'href'  => '#',
            'meta'  => array(
                'title' => __('My Item'),            
            ),
        ));
        $admin_bar->add_menu( array(
            'id'    => 'my-sub-item',
            'parent' => 'my-item',
            'title' => 'My Sub Menu Item',
            'href'  => '#',
            'meta'  => array(
                'title' => __('My Sub Menu Item'),
                'target' => '_blank',
                'class' => 'my_menu_item_class'
            ),
        ));
        $admin_bar->add_menu( array(
            'id'    => 'my-second-sub-item',
            'parent' => 'my-item',
            'title' => 'My Second Sub Menu Item',
            'href'  => '#',
            'meta'  => array(
                'title' => __('My Second Sub Menu Item'),
                'target' => '_blank',
                'class' => 'my_menu_item_class'
            ),
        ));
    }

?>

i also added this function to run style from else function.php however it didnt work:

function load_custom_wp_admin_style($hook) {
        // Load only on ?page=mypluginname
        if($hook != 'toplevel_page_mypluginname') {
                return;
        }
        wp_enqueue_style( 'custom_wp_admin_css', plugins_url('admin-style.css', __FILE__) );
}
add_action( 'admin_enqueue_scripts', 'load_custom_wp_admin_style' );

i added a menu to admin bar menu but it's style doesnt work;it looks like has default style

 <style>

     .my_menu_item_class{
        color:red;
         background: yellow;
    }  
     </style>
 <?php   
    add_action('admin_bar_menu', 'add_toolbar_items', 100);
    function add_toolbar_items($admin_bar){
        $admin_bar->add_menu( array(
            'id'    => 'my-item',
            'title' => 'My Item',
            'href'  => '#',
            'meta'  => array(
                'title' => __('My Item'),            
            ),
        ));
        $admin_bar->add_menu( array(
            'id'    => 'my-sub-item',
            'parent' => 'my-item',
            'title' => 'My Sub Menu Item',
            'href'  => '#',
            'meta'  => array(
                'title' => __('My Sub Menu Item'),
                'target' => '_blank',
                'class' => 'my_menu_item_class'
            ),
        ));
        $admin_bar->add_menu( array(
            'id'    => 'my-second-sub-item',
            'parent' => 'my-item',
            'title' => 'My Second Sub Menu Item',
            'href'  => '#',
            'meta'  => array(
                'title' => __('My Second Sub Menu Item'),
                'target' => '_blank',
                'class' => 'my_menu_item_class'
            ),
        ));
    }

?>

i also added this function to run style from else function.php however it didnt work:

function load_custom_wp_admin_style($hook) {
        // Load only on ?page=mypluginname
        if($hook != 'toplevel_page_mypluginname') {
                return;
        }
        wp_enqueue_style( 'custom_wp_admin_css', plugins_url('admin-style.css', __FILE__) );
}
add_action( 'admin_enqueue_scripts', 'load_custom_wp_admin_style' );

• functions
• css

1 Answer 1

To override the default styles you have to use more specific selectors.

#wpadminbar .my_menu_item_class {
    background: yellow;
}  
#wpadminbar .menupop.hover ul li.my_menu_item_class > a {
    color:red;
}