How to fix WordPress dashboard screen option & help button, it’s not working

Check if you or a plugin include bootstrap and the bootstrap CSS / Theme files.

Bootstraps .hidden class looks like:

.hidden {
  display: none !important;
}

But overrides wordpress’ definition of .hidden:

.hidden {
  display: none;
}

The Top ‘Help’ & ‘Screen Options’ bars are displayed via inline style display: block, which is overridden by bootstraps .hidden {display: none !important} css class.

This can be fixed by rewriting the Top Bars Css via Jquery / JS.

Working example:

jQuery(document).ready(function ($) {
    $("#contextual-help-link").click(function () {
        $("#contextual-help-wrap").css("cssText", "display: block !important;");
    });
    $("#show-settings-link").click(function () {
        $("#screen-options-wrap").css("cssText", "display: block !important;");
    });
})

WordPress Version 4.5.2

Bootstrap: 3.3.6

Leave a Comment