Add a logo to the top of wordpress admin menu

Question

I tried to add a logo to the admin menu as a menu item background image, but it seems not the best approach because when I try to add padding or margins to it, its position change and do not fit correctly, as shown in the image:

https://i.sstatic.net/ZpH3q.png

And I used the following code:

/********************************************************/
/* INSERT ADMIN LOGO
/********************************************************/
add_action('admin_menu', 'shomtek_admin_menu');
function shomtek_admin_menu() {
    global $menu;
    $url = 'https://google.com/';
    $menu[0] = array( __('SHOMTek'), 'read', $url, 'shomtek-logo', 'shomtek-logo');
}


/*ADMIN LOGO STYLES*/
#adminmenu a.shomtek-logo{
    display: block;
    background: url(https://example.com/logo.svg) no-repeat center center;
    background-size: 140px 40px;
    width: 140px;
    opacity: 1;
    height: 40px;
    margin: 0 auto;
    padding-top: 20px;
}

Can you please recommend the best approach to add a logo to the top of wordpress admin menu?

Thanks

Answer 1

Follow these steps: 1- Create a menu on the top of the side menu:

add_action( 'admin_menu', 'register_my_custom_menu_page' );
function register_my_custom_menu_page() {
  add_menu_page( 'Custom Menu Page Title', 'Custom Menu Page', 'manage_options', 'logo_based_menu', '', '', 1);
}

2- Add custom CSS code to print the logo inside that menu:

   function admin_style() {
     echo '<style>
        #toplevel_page_logo_based_menu {
    background-image: url('. get_field ("option", "logo_image") . ');
}
        #toplevel_page_logo_based_menu > a, #toplevel_page_logo_based_menu > a > div.wp-menu-image {
    display: none;
}
      </style>';
            }
    add_action('admin_enqueue_scripts', 'admin_style');