Right now, when I click on a menu item in the wordpress admin menu, the section that that page belongs to is automatically expanded.

For instance, if I click on a link in the Settings section then the whole Settings section is expanded:

enter image description here

If, on the other hand, I click on a link in the Appearance menu then the whole Appearance section is expanded:

enter image description here

Is there a function or action that disables that feature? That is to say, I do NOT want these sections to be expanded, but to remain closed like all of the other sections - i.e., like this:

enter image description here

  • But if menu never opens, how do you navigate to the sub-items? May 18 '16 at 13:03
  • When I hover over a menu the sub-menus fly-out to the right. When I click on a menu, it takes me to the appropriate page with all the sub-menus opened (as in the images above). I want to keep the fly-out functionality and disable the auto-expand functionality.
    – Moshe
    May 18 '16 at 13:32

I see two options here - override the CSS, or remove the "active" classes with JavaScript (sadly there is no action/filter that we can do this server-side) - I opted for the JS approach, it's cleaner, leaner and meaner:

function wpse_227037_remove_menu_classes() {
    echo '<script>jQuery( ".wp-has-current-submenu.wp-menu-open" ).removeClass( "wp-has-current-submenu wp-menu-open" ).addClass( "wp-not-current-submenu" );</script>';

add_action( 'adminmenu', 'wpse_227037_remove_menu_classes' );

The adminmenu action fires right after the menu HTML, so the code will execute the moment all admin nodes are in the DOM.

  • Thanks. The only problem is that I can see the menu briefly open and then close.
    – Moshe
    May 18 '16 at 14:53
  • Hmm, surprised given the immediacy that the script executes. The alternative is to override the CSS for the wp-has-current-submenu selector that "resets" the sub menu back to hidden. May 18 '16 at 14:54
  • Thanks. I'll give the javascript one more try and if that doesn't work then I'll dive into the CSS. Thanks again for your help.
    – Moshe
    May 18 '16 at 18:50

I have found the solution to this problem

Suggested by @TheDeadMedic jQuery class removing is only partial cure, because flyouts will still appear on click (left or right). To say more, they will still appear on click even if you completely disable JavaScript in your browser (idk how that works, but it does)

I've already posted my answer on the other thread on stackexchange here and on wordpress forums here

In short, adding overflow: hidden to menus container hides them both on hover and click events

#adminmenuwrap {
overflow: hidden;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.