Topic: Move Admin Bar to the bottom of the screen

Move Admin Bar to the bottom of the screen

@jsutherland1

Participant

14 years, 7 months ago

I know this has been addressed in older topics and older versions of buddypress but every time I try those old methods it doesn’t work properly. Is there a simple way to fix the bar to the bottom of the screen and get the menus to open upward instead of downward? I’m guessing I would replace some of the settings in the style.css file but don’t know what to replace.

Thanks in advance.

Viewing 8 replies - 1 through 8 (of 8 total)

@meini

Member

14 years, 6 months ago

@jon, try this in your child theme’s css:

#wp-admin-bar {
top:inherit;
bottom:0;
}

you still have to change the drop down menu to rise up though. But it is a start….
Cheers
Meini

@meini

Member

14 years, 6 months ago

#wp-admin-bar ul li ul {
bottom:25px;
}

should to that trick… hth
Meini

@dmcdmc

Participant

14 years, 6 months ago

hey,
I’ve been trying to move the admin bar also. I got it on the bottom and the menus pop up. However, the 3rd level lists pop up from the admin bar, and not in relation to where your mouse is. Here are some screen shots below…

http://na710n.com/files/2010/06/adminbar1.jpg

http://na710n.com/files/2010/06/adminbar2.jpg

I’ve looked into the “3rd and above level lists” section of adminbar.css but haven’t found anything.

Any ideas?

@dmcdmc

Participant

14 years, 6 months ago

no one?

@jsutherland1

Participant

14 years, 5 months ago

i have the same problem

@pappyhammer

Participant

14 years, 5 months ago

I have the same problem as well. If someone could explain us how to fix that, i will be very grateful !

@nicholmikey

Participant

13 years, 7 months ago

Same problem

@nicholmikey

Participant

13 years, 7 months ago

Never mind, this was the solution :

body {
padding-top: 25px;
}

#wp-admin-bar {
bottom: 0 !important;
position: fixed !important;
top: auto !important;
}
#wp-admin-bar ul { /* all lists */
bottom: 24px;
}

#wp-admin-bar ul li:hover ul ul, #wp-admin-bar li.sfhover ul li ul {
left: -999em;
bottom: auto;
}