WordPress Toggle On and Off the Admin Bar (UI/UX Improvement)
Get Premium

WordPress Toggle On and Off the Admin Bar (UI/UX Improvement)

Element.How also offers premium tutorials! Check them here:

WordPress Toggle On and Off the Admin Bar (UI/UX Improvement)

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).

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.

WordPress Toggle On and Off the Admin Bar (UI/UX Improvement) 1

<script> 
/* Please login to get the code 
 * The code will be for the WordPress Toggle On and Off the Admin Bar (UI/UX Improvement) tutorial 
 * Found at this URL https://element.how/wordpress-toggle-admin-bar/ 
 */ 
</script>

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!

WordPress Toggle On and Off the Admin Bar (UI/UX Improvement)

Element.how also provides premium tutorials showing awesome advanced designs, check them out here.

Looking for something else? Search across 2927 Elements right here:

And get exclusive Elementor related discounts here

Checkout the Elementor Addon Finder directly

11 Responses

  1. 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

    1. 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!

  2. 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. 🙂

  3. Great code snippet! Questions:

    1) How can I make it so that, once toggled off, the Admin Bar *remains* toggled off as I visit other posts and pages on the site; until I toggle it back on...?

    2) Also, how could I make it start in the toggled *off* state? (Perhaps that even solves the first question)

    Thanks!

    1. Greetings Mike!

      I updated the code to preserve the previous state across page reloads.

      Let me know if it works well for you!

      Cheers!

      1. That sounds great, I look forward to trying it later this evening…!

Leave a Reply