How To Move WordPress Admin Bar to the Bottom Area

Here is the easiest and best way Move WordPress Admin Bar to Bottom Area. This trick is the best solutions if your WordPress Theme has Fixed Top Menu or Fixed Header. How To Move WordPress Admin Bar to Bottom Area that I will show you is NON PLUGIN version.

Just put some code on your Current WordPress Theme and it’s work. This Code that I rewrite, I got from many sources such as from CSS Trick and from Powered By Coffee.

I just combine this code and make it better and of course compatible with latest WordPress (Tested on WordPress 4.9.4). I decided to put my code on GitHub Share Code (or we know it as GIST). Check this out.

Baca Juga  How To Add Breadcrumb Rich Snippet without Plugin on WordPress

With a little CSS Trick, we can sort this, adjusting where the website’s main menu sits on the screen when a user is logged in. But things can get a bit cumbersome especially when considering different screen sizes and changes in design between them.

It’s almost a thankless task. Only admin’s see this bar so there is the temptation to leave this little job till later as you focus on the rest of the theme build. But when building a site ‘content is king’ and the sooner a client can start populating their site ( and the admin bar certainly aids them in this task ) the closer we all get to a fully working site.

So why not just move the admin bar to the bottom of the page?

It remains fixed to the bottom of the screen and is much less likely to affect other page components (unless the client wants some kind of crazy floating footer).

Baca Juga  Cara Mudah Praktis dan Cepat Mengatasi Performa Windows 10 yang Lemot biar Gesit Lagi

How To Move WordPress Admin Bar to Bottom Area

Put this code on your current theme functions.php

Super Simple Code PHP Functions above from CSS Trick, and for CSS we use from Powered By Coffe. It’s because CSS Trick version didn’t compatible with latest WordPress. Here is the CSS only

There are a little bit issues, when currently logging and access front/main site there are gap on the top. It’s because WordPress auto add a little bit CSS that break this design. To solve this issues just add this code on your functions.php and save it.

Baca Juga  How To Choose The Right Server for Your WordPress Website and Project

Is it super easy right?

1 Comment

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.