Skip to content

Instantly share code, notes, and snippets.

@jauhari
Created March 8, 2018 05:03
Show Gist options
  • Save jauhari/87d69b4ac96d79c91295c1aec29bc399 to your computer and use it in GitHub Desktop.
Save jauhari/87d69b4ac96d79c91295c1aec29bc399 to your computer and use it in GitHub Desktop.
Move WordPress Admin Bar to the Bottom
function pakdhw_move_admin_bar() {
echo '
<style type="text/css">
body.admin-bar #wphead {
padding-top: 0;
}
#wpadminbar {
top: auto !important;
bottom: 0;
position: fixed;
}
#wpadminbar .quicklinks .menupop ul {
position: absolute;
bottom: 32px;
background-color: #23282d;
}
#wpadminbar .quicklinks .menupop ul + ul {
bottom: 70px;
}
#wpadminbar .quicklinks .menupop ul ul {
transform: translateY(62px);
-webkit-transform: translateY(62px);
-ms-transform: translateY(62px);
}
#wpadminbar .quicklinks .menupop ul.ab-sub-secondary {
bottom: 64px;
position: absolute;
}
@media screen and (max-width: 782px) {
#wpadminbar .quicklinks .menupop ul {
bottom: 46px;
}
#wpadminbar .quicklinks .menupop ul + ul,
#wpadminbar .quicklinks .menupop ul.ab-sub-secondary {
bottom: 86px;
}
#wpadminbar .quicklinks .menupop ul ul {
transform: translateY(92px);
-webkit-transform: translateY(92px);
-ms-transform: translateY(92px);
}
}
</style>';
}
// on backend area
add_action( 'admin_head', 'pakdhw_move_admin_bar' );
// on frontend area
add_action( 'wp_head', 'pakdhw_move_admin_bar' );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment