Plugin Sale! Save 15% on pro plugins with discount code: NEWYEAR2021
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:

Remove Menu Hover Border Version 1.0 (876B zip)

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

Jeff Starr
About the Author
Jeff Starr = Creative thinker. Passionate about free and open Web.
BBQ Pro: The fastest firewall to protect your WordPress.

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?

    • Jeff Starr
      Jeff Starr 2021/02/08 11:13 pm Reply

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

Leave a reply

Name and email required. Email kept private. Basic markup allowed. Please wrap any small/single-line code snippets with <code> tags. Wrap any long/multi-line snippets with <pre><code> tags. For more info, check out the Comment Policy and Privacy Policy.

Subscribe to comments on this post

Welcome
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: Become your own WordPress guru.
Thoughts
Today my trusty scanner died. Not going to replace it. And when my printer finally dies, I'm not going to replace that either.
Spent about a week or so away from screens and media as much as possible. Helps to regain perspective.
Celebrating 8 years providing premium WordPress plugins at Plugin Planet!
Power is *not* relying on a 3rd-party service to handle your email.
Streamlining my entire digital universe into a single highly focused beam.
Simply Static is my go-to plugin for generating static HTML versions of WordPress sites. Works flawlessly.
Note to self: never, ever, ever buy any CD or DVD from eBay. Every single time the discs are scratched, damaged, missing, fake, or worse. Never again you clowns.
Newsletter
Get news, updates, deals & tips via email.
Email kept private. Easy unsubscribe anytime.