Super Plugin Sale! Your Choice: BOGO or 30% Off »
Web Dev + WordPress + Security

Fix Weird Hover Border in WordPress 5.7 Admin Menu

I’ve been testing the beta for WordPress 5.7. So far no complaints but there is one weird thing it looks like they are adding, some weird 4-pixel width border that displays when you hover over any item(s) on the main WordPress menu. It’s even got a transition animation to make it feel extra wonky. Here is a screenshot for those who have not yet had the pleasure of experiencing the new stylez (look on the left-hand side of the menu, blue border appears on hover for every menu item):

Weird hover border on WP menu linksSloppy unnecessary obtrusive hover border on WP menu links

I have no idea why anyone would think this is a good idea or even necessary. Although obviously someone seems to think so. Honestly I don’t care. I just want to fix it, because it’s a clunky dumb feeling that distracts from normal menu navigation. You know, the menu navigation that’s been working great for years now, for millions and millions of users. I can’t roll my eyeballs hard enough here.

Better ways

Off the top of my head I can think of four ways that the hover/border accessibility “feature” could have been better implemented:

  • Add an option on the User Profile screen, let the user decide
  • Create a new super-contrasted “Admin Color Scheme”, let the user decide
  • Actually increase the contrast of existing color scheme styles, not just add a wonky border animation
  • Like so many other good WP things, make a plugin that can do it, then let the user decide to install or not

Why are these better? Because they are user first, not designer first. Always let the user decide, especially when it comes to the UI.

Code fix

So for anyone who wants to disable the new awkward side-border hover styles, just add this code to your theme (or child theme) functions.php file, or grab a copy of the same code as a simple plugin below.

// add style for wp menu
function shapeSpace_wp_menu_styles() {
	echo '<style>#adminmenu a:focus, #adminmenu a:hover, .folded #adminmenu .wp-submenu-head:hover { box-shadow: none !important; }</style>';
add_action('admin_head', 'shapeSpace_wp_menu_styles');

What is this code doing. It is adding a line of CSS to the Admin Area. The CSS simply removes the annoying 4px-width box-shadow that is responsible for displaying the odd side border. One rule and done.

Of course, there is no need to add the code manually if you would rather use a simple, free plugin to do the job..

Download plugin

To make life easier, you can download the above code solution as a simple plugin:

Download Remove Menu Hover BorderVersion 1.0 ( 876 bytes ZIP )

Install, activate, and say “hello” again to clean, unobtrusive menu navigation styles.

About the Author
Jeff Starr = Fullstack Developer. Book Author. Teacher. Human Being.
GA Pro: Add Google Analytics to WordPress like a pro.

2 responses to “Fix Weird Hover Border in WordPress 5.7 Admin Menu”

  1. Thank you Jeff. I’m wondering if perhaps they would have added this for accessibility reasons, maybe for extra contrast?

    • Yeah it probably is for something along those lines. Doesn’t change the fact that it’s super annoying and distracting.

Comments are closed for this post. Something to add? Let me know.
Perishable Press is operated by Jeff Starr, a professional web developer and book author with two decades of experience. Here you will find posts about web development, WordPress, security, and more »
The Tao of WordPress: Master the art of WordPress.
Crazy that we’re almost halfway thru 2024.
I live right next door to the absolute loudest car in town. And the owner loves to drive it.
8G Firewall now out of beta testing, ready for use on production sites.
It's all about that ad revenue baby.
Note to self: encrypting 500 GB of data on my iMac takes around 8 hours.
Getting back into things after a bit of a break. Currently 7° F outside. Chillz.
Get news, updates, deals & tips via email.
Email kept private. Easy unsubscribe anytime.