Has the admin bar ever annoyed you at the top or just wanted to move WP admin bar to the bottom of the browser?
Use this snippet to move it to the bottom. Add this to your functions.php file in your child theme.
SNIPPET: How to move WordPress admin bar to bottom
1 Comment
Submit a Comment
You must be logged in to post a comment.
Related Posts
Explore more from Divi Engine
Divi Form Builder
From simple contact forms to complex frontend post or product creation, Divi Form Builder has you covered.
Find out more
Divi Machine
Build complex websites that displays dynamic fields you can filter, search and so much more with the Divi Builder.
Find out more
Divi BodyCommerce
A versatile toolkit for developers using Divi and WooCommerce together, designed to boost your e-commerce site and achieve greater conversion rates.
Find out more
Divi Handoff
Let clients update content without touching the Divi Builder. Design layouts once, connect them to Flexible Content fields, and give editors simple forms for text, images, and sections.
Find out more
Divi Loop Extender
Unlock the Full Power of Divi 5 Loop Builder Add advanced sorting, filtering, and relationship logic right inside the Visual Builder.
Find out more
Divi Membership
Monetize your Divi websites by transforming them into membership sites with seamless subscription management, user-friendly interfaces, and customizable membership tiers.
Find out more
Divi Machine Accounts
Build an account area for your customers to edit their details, access wishlist, submitted posts and more. *Note: Requires Divi Machine installed and active
Find out more
Divi Ajax Filter
Filter WooCommerce, Posts & Custom Posts without reloading the page.
Find out more
Divi Mobile
Divi Mobile helps you create beautiful looking mobile menus without having to code.
Find out more
Divi Nitro
Give your Divi website that extra boost of speed with our Divi Nitro plugin to enhance your customer's experience.
Find out more
Divi Protect
Password protect the content of your Divi website with our Divi Protect plugin. Keep unwanted eyes out!
Find out more
Divi Mega Menu
Create stunning, responsive, and content-rich mega menus using the Divi Builder you already know. No coding required.
Find out more
i update this snippet
function divi_engine_move_admin_bar_bottom() {echo '
html {
margin-top: unset !important;
}
html.js-focus-visible {
margin-top: 172px !important;
}
body {
margin-top: -28px;
padding-bottom: 28px;
}
body.admin-bar #wphead {
padding-top: 0;
}
body.admin-bar #footer {
padding-bottom: 28px;
}
#wpadminbar {
top: auto !important;
bottom: 0;
}
#wpadminbar .quicklinks .menupop ul {
bottom: 32px;
}
#wpadminbar{
top:auto;
bottom: 0;
}
#wpadminbar .menupop .ab-sub-wrapper{
bottom: 25px;
}
@media all and (max-width: 600px){
#wpadminbar{
position: fixed;
}
}
@media screen and (max-width: 575px){
html.js-focus-visible {
margin-top: 111px !important;
}
}
@media screen and (min-width: 576px) and (max-width: 1024px){
html.js-focus-visible {
margin-top: 158px !important;
}
}
';
}
// Action to add CSS on WP admin
add_action( 'admin_head', 'divi_engine_move_admin_bar_bottom' );
// action to add CSS to frontend
add_action( 'wp_head', 'divi_engine_move_admin_bar_bottom' );