| Updated 07.06.22
PSST! Since writing this blog, I’ve published a WordPress plugin with updated code that solves the problem this article was addressing. You can find the plugin here https://wordpress.org/plugins/better-wp-admin-bar/.
Improving the annoying admin bar
If you’ve ever worked on a WordPress website with a fixed header, you’ll know how annoying the admin bar can be. It always wants to get in the way. Sure you can just turn it off or hide it with some CSS, but that just makes your life that much harder when you need to access it.
I thought I would apply some simple CSS and JS to improve the life of me and my teammates who are currently working with a website with a fixed header navigation.
Check out this video to see how it can be annoying to deal with as it covers up a lot of my header making it easy to miss click on the wrong thing.
The next video below is what it will look like, after applying some code.
As you can see, I’ve added some styling to keep the default WordPress admin bar a bit more out of the way when not in use, but still easy enough to get to whenever you need it.
The tutorial
So first things first, we need to get rid of the CSS that gets injected into the page by WordPress when you are logged in and have the admin bar set to show. I do this by targeting the actual injected style tag and removing it from the DOM.
JS
For the JS we need to create a function that only runs the code inside if the #wpadminbar is present.
Then we need to grab the head and all the style tags that appear within the head tag, this is easily done with querySelector and querySelectorAll.
After grabbing these elements, we need to loop through them in order to locate the specific style tag we need to destroy. I do this here by running the forEach method on my style tags, and then seeing if any of them contain some of the styling only used for the #wpadminbar. Once it finds the right tag, simply use the remove method to delete it from your DOM. In addition to this, I call the toggleOpen function which I will detail in a moment.
function removeWpStyleTag() {
if (document.getElementById("wpadminbar")) {
const head = document.querySelector("head");
const styleTags = head.querySelectorAll("style");
styleTags.forEach((styleTag) => {
if (styleTag.textContent.includes("html { margin-top: 32px !important; }")) {
styleTag.remove();
}
});
toggleOpen("#wpadminbar");
}
}The code for the toggleOpen() function is very simple and just lets the user keep the admin bar in view on click, or hide it again on a further click.
function toggleOpen(el) {
document.querySelector(el).addEventListener("click", ({ target }) => {
target.classList.toggle("open");
});
}CSS
For the CSS, we are just going to add some styles to handle the hover states, as well as a simple pulse animation that hides the admin bar a little bit more, while still keeping it in view so it can be used.
PRO TIP – When you need to animate movement in CSS, it’s always best to use translations instead of using positioning. You will get a much smoother animation this way. Find out more on this by reading this great article.
@keyframes pulse {
0%,
100% {
opacity: 0.1;
}
50% {
opacity: 0.5;
}
}
#wpadminbar {
position: fixed !important;
transform: translateY(-20px);
animation: pulse 10s ease-in-out infinite;
transition: transform 0.5s;
will-change: transform;
@media screen and (max-width: 782px) {
transform: translateY(-35px);
min-width: auto !important;
}
&:hover {
animation: none;
opacity: 1;
transform: translateY(0);
}
&.open {
animation: none;
opacity: 1;
transform: translateY(0);
}
}And that’s it, nice and easy!
Some of you might have noticed a potential issue with this code, which is if you have any style tags yourself that contain margin-top: 32px !important then it would delete the style tag. Yep, that’s true, so you can adapt the code to be even more specific if needed.