Relocate admin-bar in Buddypress

I decided to install and play with Buddypress this weekend. The first thing I wanted to do was move the admin-bar to the bottom of the page. Buddypress is still very young and I expect this to be a feature you can add with a simple click.

To make things easy you might want a code editing program. This will add numbers for each line. It will make it super easy to find the right code to change. I recommend Notepad++ on the PC and Espresso on the Mac

First things first. If you havent already renamed your custom.css and site-wide.css file, we need to do that first.

You can find the files in Themes > bphome > CSS

Rename custom-sample.css to custom.css and site-wide-sample.css to site-wide.css

This will activate a custom css for us to use without modding core files.

Using a code editing program (listed above) add this code to  site-wide.css:

/* Relocate Admin-Bar */
body { padding-top: 0px !important; }
#wp-admin-bar {
bottom: 0 !important;
position: fixed !important;
top: auto !important;
#wp-admin-bar ul {
bottom: 27px;
#wp-admin-bar ul li:hover ul ul, #wp-admin-bar li.sfhover ul li ul{
bottom: auto;
position: relative;

/* END Relocate Admin-bar */

You should have a fully functioning admin-bar at the bottom of the page.

This will not break when you update!

Related Posts with Thumbnails

4 Thoughts.

  1. @ Vincent
    Good question. I guess i never looked into it because I didnt care when I was in my dashboard. Ill look into it further later.

    Off the top of my head you could just edit the admin-bar.css and that would do it. Every time you update BP it would break however.

    I also havent dug into the Trunk Version yet with the new template system. That could change everything.

Leave a Reply