Topic: Move Admin Bar to the bottom of the screen

Move Admin Bar to the bottom of the screen

jon
Participant

@jsutherland1

14 years, 6 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

@meini

14 years, 5 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

@meini

14 years, 5 months ago

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

should to that trick… hth
Meini

dmcdmc
Participant

@dmcdmc

14 years, 5 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

@dmcdmc

14 years, 5 months ago

no one?

jon
Participant

@jsutherland1

14 years, 4 months ago

i have the same problem

pappyhammer
Participant

@pappyhammer

14 years, 4 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

@nicholmikey

13 years, 6 months ago

Same problem

nicholmikey
Participant

@nicholmikey

13 years, 6 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;
}