Table of Contents
I was getting frustrated by the WordPress admin bar being in the way when trying to adjust the layout of my headers (and just in general), but I didn't want to get rid of it completely. The shortcuts are really useful, but sometimes I wish we could just one click remove it.
So I got to work and coded a toggle that will show up on the front end, for administrators users only.
Clicking on it will hide the WP admin bar, clicking again will show it. If the small toggle itself gets in the way, you can click the arrow to move it to the other corner, or the "x" to remove it until page reload.
Here is what you get from the code below (click video to enlarge).
Keep reading, or checkout Imran's amazing video to learn more about this and how to add it to your site!
Toggle WordPress admin bar visibility code snippet
Add this in a new code snippet, from the Code Snippet plugin, or in your child theme functions.php file. Avoid Elementor Code feature as it doesn't accept PHP.
/* Code from https://element.how/wordpress-toggle-admin-bar/
* Copyright 2023 Maxime Desrosiers
* V1.0 2023/01/03
*/
add_action('wp_footer', 'elementhow_add_admin_bar_button');
function elementhow_add_admin_bar_button() {
if (current_user_can('administrator')) {
?>
<div id='toggle-admin-bar-wrapper' style="position:fixed; left:20px; bottom:20px;">
<button id="toggle-admin-bar"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M0 0h48v48H0z"/><path d="M14 48h4v-4h-4v4zm8 0h4v-4h-4v4zm4-44h-4v20h4V4zm7 5-3 3a12 12 0 1 1-12 0l-3-3a16 16 0 1 0 18 0zm-3 39h4v-4h-4v4z"/></svg></button>
<button id="toggle-admin-bar-position"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M22 9a1 1 0 0 0 0 1.4l4.6 4.6H3.1a1 1 0 1 0 0 2h23.5L22 21.6a1 1 0 0 0 0 1.4 1 1 0 0 0 1.4 0l6.4-6.4a.9.9 0 0 0 0-1.2L23.4 9A1 1 0 0 0 22 9Z"/></svg></button>
<button id="remove-toggle-admin-bar"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 1024"><path d="M640 320 512 192 320 384 128 192 0 320l192 192L0 704l128 128 192-192 192 192 128-128-192-192 192-192z"/></svg></button>
<style>
#toggle-admin-bar-wrapper {
opacity: 0.6;
}
#remove-toggle-admin-bar {
padding: 0;
border: none;
background-color: transparent;
cursor: pointer;
position: absolute;
left: -2px;
top: -11px;
cursor: pointer;
}
#remove-toggle-admin-bar svg {
width: 12px;
height: 12px;
}
.is-lower-left #remove-toggle-admin-bar {
left: 14px;
}
#toggle-admin-bar {
padding: 0;
border: none;
background-color: transparent;
cursor: pointer;
}
#toggle-admin-bar svg {
border-radius: 40px;
width: 26px;
height: 26px;
fill: #000;
stroke: #FFF;
}
#toggle-admin-bar-position {
background-color: transparent;
position: absolute;
border: none;
left: -2px;
bottom: -16px;
cursor: pointer;
padding: 1px 6px;
}
#toggle-admin-bar-position svg {
width: 18px;
height: 18px;
}
.is-lower-left #toggle-admin-bar-position svg {
transform: rotate(180deg);
}
</style>
</div>
<script>
(function () {
let adminBar = document.getElementById('wpadminbar');
let toggleAdminWrapper = document.getElementById('toggle-admin-bar-wrapper');
let toggleAdminBar = document.getElementById('toggle-admin-bar');
let toggleAdminPosition = document.getElementById('toggle-admin-bar-position');
let removeAdminBarToggle = document.getElementById('remove-toggle-admin-bar');
if (!adminBar) {
toggleAdminWrapper.remove();
return;
}
toggleAdminBar.addEventListener('click', function () {
if (adminBar.style.display === 'none') {
adminBar.style.display = 'block';
document.body.classList.add('admin-bar');
document.body.style.removeProperty('margin-top');
document.querySelectorAll('.elementor-sticky--active').forEach(e => e.style.transform = 'translateY(0)')
} else {
adminBar.style.display = 'none';
document.body.classList.remove('admin-bar');
window.innerWidth > 782 ? document.body.style.marginTop = '-32px' : document.body.style.marginTop = '-46px';
window.innerWidth > 782 ? document.querySelectorAll('.elementor-sticky--active').forEach(e => e.style.transform = 'translateY(-32px)') : null;
}
});
toggleAdminPosition.addEventListener('click', function () {
if (toggleAdminWrapper.style.left === '20px') {
toggleAdminWrapper.style.left = 'auto';
toggleAdminWrapper.style.right = '20px';
toggleAdminWrapper.classList.add('is-lower-left');
} else {
toggleAdminWrapper.style.left = '20px';
toggleAdminWrapper.style.right = 'auto';
toggleAdminWrapper.classList.remove('is-lower-left');
}
});
removeAdminBarToggle.addEventListener('click', function () {
toggleAdminWrapper.remove();
});
}());
</script>
<?php
}
}
Adjusting the code
One part of the code you might want to change is this part:
#toggle-admin-bar-wrapper {
opacity: 0.6;
}
You can adjust the opacity to your liking, to make the toggle more or less subtle.
If you are comfortable with CSS, you can also make the entire design your own, and style the toggle the way you wish. You can change the SVGs to other icons of your choice as well.
Elementor Sticky Elements
It might not work perfectly with sections or containers that are set to "sticky" from within the Elementor > Advanced > Motion effects settings.
In these cases, just toggling the bar on and off again should fix positioning issues.
Conclusion
Hopefully you got some value from this! Let me know if you like this mod in the comments.
Cheers!
Element.how also provides premium tutorials showing awesome advanced designs, check them out here.
And get exclusive Elementor related discounts here
Checkout the Elementor Addon Finder directly
3 Responses
Hi Maxime,
not sure if this is the right post to comment on, but I've been struggling with two things:
1. my header drop downs disappear behind my hero image, but only at the very top of the page. somehow they appear when you scroll down a little. happens on all pages.
2. my URLs change their format when you click around on the page. e.g. when you are on the main page and then click on "about". instead of showing a clean URL, it generates a long tail. this happened when I did my last round of updates (incl. elementor)
https://acework.io/
https://acework.io/about/ -> what it should look like (and this is accessible on it's own), but when you click on it on the main page, it comes out as
https://acework.io/about/?_gl=1*1luxg02*_ga*MTk5OTMyNDkzNC4xNjcyOTkxMTgy*_up*MQ..
many thanks! A
Greetings!
The URL thing is from GA, I can't help much more than that as I'm not very familiar with it.
As for your header drop down issues, I think if you increase the z index of the header section, and check that it isn't set to overflow:hidden, it should fix this.
Cheers!
Hi Maxime,
I have the same opinion as you on this bar (both useful and disturbing). Before I saw this tip, I had started a simple CSS-only solution, as follows:
/*############*/
#wpadminbar {
min-width: inherit;
width: 35px;
overflow: hidden;
transition: 300ms;
}
#wpadminbar:hover {
width: 100%;
overflow: visible;
}
.logged-in {
margin-top: -32px;
}
.elementor-sticky--effects {
margin-top: -32px !important;
}
/*############*/
My code works fine but for websites with a sticky-header that shrinks on scroll, it leaves a small space just above...
If it would be useful to anyone. 🙂