Book Sale! Save 20% on WordPress books with discount code: SAVE20
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 = Web Developer. Book Author. Secretly Important.
Digging Into WordPress: Take your WordPress skills to the next level.

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

      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.
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
Weird bug with Affinity Designer. If images are opening upside down, click View ▸ Reset Rotation and problem solved.
Had a good laugh today when I saw this in a support email: “In observance of Arbor Day our team will be out of the office on Friday, April 30th.” Lol Arbor Day.
Just spent a few minutes scrolling thru FB, almost every ad was pushing the va×.
On macOS when an app won’t hide, you can force it by holding the ⌥ (option) key and clicking anywhere on the desktop.
Currently having a blast redesigning Plugin Planet, so much work so little time.
Thanks to David McCan over at WebTNG for the awesome BBQ Pro review.
Enjoyed a nice mini-vacation with my fam. Great way to recharge and regroup.
Newsletter
Get news, updates, deals & tips via email.
Email kept private. Easy unsubscribe anytime.