How do I clear the menu bar?
-
I’m trying to figure out a way to clear the admin bar – what I’m saying is that I’d like my body to start after the admin bar, as it is messing up the background image I have and the spacing.
I guess what I want to know is there a way for the body to start at the bottom of the admin bar, rather than having the admin bar overlay the body? I am trying to line up my background image and logo, and when logged in and the admin bar shows, it pushes the logo down, but not the background image.
-
At the risk of over simplifying things a little bit…
body {
margin-top: 26px !important;
}Forgive my ignorance, would this go in the home theme’s base.css or the admin bar’s css? I put it in the base.css, but it didn’t really work, What I’d like to do is have the admin bar just be at the top, and then just have everything start below it. Another question, is what file is the admin bar actually called?
Well, it could really go in a few different places. Let me take a look when I get to work to see where will work the best.
Here on BuddyPress, the “admin bar” has been nick named the “buddy bar.” It actually replaces the typical “admin bar” from a normal WPMU install.
The files for it can be found in the bp-core directory if you needed to modify it for any reason.
The buddy bar is actually loaded very last in the DOM, and it is absolutely positioned to top 0, so its essentially hovering over the body contents. Because there are at least two active themes at any given moment (home and member) you could either throw the css into homethemedir/css/site-wide.css, or all of the base.css for each theme.
But let me double check for certain.
Can you tell me which file specifically calls the admin bar? I see the bb-core-admin.php file in the directory, but can’t find the file that actually calls it.
I have the same question.
My site is 960px wide, and the buddybar looks great on the site (so far) as it sits centered right above the content. But, I’d rather have the buddybar span the entire width of the site (think 100% or min/max) while the rest of the site is still 960px wide. This will allow the bar to properly appear on the members blogs and the blog admin screens.
http://www.mmaopinion.com (looks good, right?)
http://brandt.mmaopinion.com (see how the bar moves to the left?)
/mu-plugins/bp-core/bp-core-adminbar.php but the css gets enqueued in bp-core-cssjs.php in the same dir.
There’s a bug in RC-1 that sends out the admin bar css after the site-wide.css so including your mods in there won’t do much good. Patch in : https://trac.buddypress.org/ticket/555
The wp_footer action ‘calls’ the admin bar.
Ok, so where can I hack the wp_footer – what I was hoping to do was drop a <div class=”clear”></div> after it so that the <body> can start AFTER the menubar. My issue is that with a background image that sits up top, the logo won’t align with it when the admin bar exists. When not logged in and there’s no admin bar, it’s fine. But the admin bar showing will push down my logo and therefor not align with my background image.
Well, by giving the body a padding-top, it shouldn’t be happening like that.
Crap I said margin above didn’t I?
Try padding-top. That should push the background image also.
The admin bar gets triggered on every ‘wp_footer’ action that your theme triggers. Which is on every page load. There is no function call from a php file that does it. bp is almost completely driven by wp ‘actions’. Everything gets loaded, defined and ready for the events that are defined to make things happen.
Everybody is posting around each other here.
The ‘wp_footer’ action is triggered by your theme’s usage of (normally) get_footer()
which calls wp_footer()
which does do_action(‘wp_footer’)
which triggers bp_core_admin_bar() in bp-core-adminbar.php
which gets you the admin bar.
*deep breath*, let it out slowly now…
So how can I split the buddybar away from the body? The body has a width of 960px…I want the buddybar to align left and span the entire width of the page. Is this possible?
My question is more CSS-based, but it’s the same general idea around the Buddybar…how can we seperate the bar from the body?
John, I tried your technique, but when not logged in, it leaves that space that would normally be occupied by the admin bar just blank space. I wish there was a way to call the admin bar like a navbar, put it in it’s own <div> and then not have the admin bar overlay everything.
We haven’t met. I’m Burt and this is my partner John. Perhaps you’ve heard of us? Our professional tag team wrestling stage names are Ren and Stimpy. I never get to play with the pretty css stuff.
lol Oh Ren… haha!
@brandtd, this is certainly possible. As a matter of fact, this should happen as default unless you change the width of the body or html elements themselves. This is because the “Buddy Bar” isn’t contained by anything that has a relative position attached to it.
In bp-core/css/admin-bar.css – Try…
#wp-admin-bar {
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
z-index: 1001 !important;
height: 26px !important;
color: #fff !important;
text-align: left !important;
background:url(../images/admin_bar_back.gif) #818181 repeat-x !important;
}@brian, duh I get what you’re saying now. If I can give some feedback about the Buddy Bar for a moment, I feel that it should be an all or nothing kind of deal. Either it’s always there for people to use, or it’s never there and people have to naturally find their profile area and do things from there. Toggling a whole new set of what are essentially just short-cuts and adjusting the entire layout of the screen, even if by 26px, provides for a moment of awkwardness from a user perspective. For the 3 seconds it takes for someone to think to themselves “Hey what’s that? Do I need it? What does it do? Oh gosh there’s tons of menus now? What is this stuff?”
Now if you’ve used WordPress.com or signed up for a Gravatar before, then the bar idea isn’t new. But for what I consider the core crowd we’re catering to by using BuddyPress as a social networking platform, if it isn’t uniformly worked into the design of the site from the beginning, it only serves to confuse.
Again, this is just my opinion. Not saying it’s right, and certainly not saying that there is a better way. Just saying…
/rant
Back on topic. In theory you could put a…
<body>
<?php if (is_user_logged_in()){ ?>
<div id="buddy-bar-buffer"></div>
<?php }?>In your header file, and attach the CSS to that, rather than to the body itself? That would then only show that buffer when the user is logged in, and once they are logged in, that buffer will push the body down (as styled by the CSS you will give it in your base.css).
Does that make sense?
@bmg1227: The admin bar CSS adds: body { padding-top: 28px !important; } to make space for the admin bar.
Have you tried putting your background image on the html element?
“Have you tried putting your background image on the html element? “
Andy, when you refer to the “html element” what exactly do you mean? Adding the background image into the Admin Bar’s stylesheet?
Thanks
I’ve included a couple images to show my problem. In the first image, the admin bar is not displayed because a user is not logged in.
In the second image, the wrap and header div id’s shift downward (along with the rest of the page), but the background image stays fixed, which causes an unpretty distortion.
I’d like to have the background image flow perfectly at all times, including when the admin bar is showing. Where should I hard code the background image?
Image when users not logged in (looks good)
http://www.screencast.com/t/5HLrC1WH
Image when users ARE Logged-In (distorted)
http://www.screencast.com/t/pm4q54te6
I apologize if this is a simple question, I’ve been trying for hours to get it to work.
Thanks
No apologies necessary…
What Andy meant was applying the background image to the html instead of the body, like so…
Instead of…
body {
#EEEEEE url(images/bgbp.png) repeat-x scroll 0 0;
}use…
html {
#EEEEEE url(images/bgbp.png) repeat-x scroll 0 0
}
- The topic ‘How do I clear the menu bar?’ is closed to new replies.