Hello everyone.

I would appreciate if anyone can help me with how i can move the Adminbar from top to the bottom. thanks.

[@r-a-y Keymaster 15 years, 7 months ago]

Requires some CSS knowledge.

You can probably override this setting in your child theme’s stylesheet (I’m assuming you already use a child theme!).

Don’t know what a child theme is?

https://codex.buddypress.org/how-to-guides/building-a-buddypress-child-theme/

When you’ve created a child theme, add this to your child theme’s stylesheet:

#wp-admin-bar {bottom:0 !important;}

#wp-admin-bar ul li ul {bottom:23px !important;}

[@jimcale Participant 15 years, 7 months ago]

thanks Ray, i am using default theme. my css knowledge is very limited. i tried pasting that code into defualt.css and adminbar just disappeared.

[@r-a-y Keymaster 15 years, 7 months ago]

Create a child theme (instruction link is above), then paste that CSS snippet in your child theme’s stylesheet.

[@jimcale Participant 15 years, 7 months ago]

Ok thanks alot.

[@dominikmatus Participant 15 years, 2 months ago]

You must have this :

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;
}

This is my style of admin bar:

#wp-admin-bar {
left: 0;
z-index: 99;
height: 25px;
font-size: 11px;
width: 100%;
z-index: 1000;
bottom: 0 !important;
position: fixed !important;
top: auto !important;
}
#wp-admin-bar .padder {
position: relative;
padding: 0;
width: 100%;
margin: 0 auto;
background: url( images/red.png );
height: 25px;
}
body#bp-default #wp-admin-bar .padder {
min-width: 960px;
max-width: 1250px;
}

body#bp-default.activity-permalink #wp-admin-bar .padder {
min-width: 960px;
max-width: 960px;
}

#wp-admin-bar * { z-index: 999; }

#wp-admin-bar div#admin-bar-logo {
position: absolute;
top: 5px;
left: 10px;
}

#wp-admin-bar a img {
border: none;
}

#wp-admin-bar li {
list-style: none;
margin: 0;
padding: 0;
line-height: 100%;
text-align: left;
}

#wp-admin-bar li a {
padding: 7px 15px 7px 15px;
color: #CFB8A8;
text-decoration: none;
font-size: 11px;
}
#wp-admin-bar li.alt { border: none; }

#wp-admin-bar li.no-arrow a {
padding-right: 15px;
}

/*#wp-admin-bar ul li ul li a span {
display: none;
}*/

#wp-admin-bar li:hover, #wp-admin-bar li.hover {
position: static;
}

#admin-bar-logo {
float: left;
font-weight: bold;
font-size: 11px;
padding: 5px 8px;
margin: 0;
text-decoration: none;
color: #CFB8A8;
}
body#bp-default #admin-bar-logo { padding: 2px 8px; }

/*******************/

#wp-admin-bar ul { /* all lists */
margin: 0;
list-style: none;
line-height: 1;
cursor: pointer;
height: auto;
padding: 0;
bottom: 24px;
}

#wp-admin-bar ul li { /* all list items */
padding: 0;
float: left;
position: relative;
background: url( images/admin-menu-arrow.gif ) 88% 53% no-repeat;
padding-right: 11px;
}
#wp-admin-bar ul li.no-arrow {
background: none;
padding-right: 0;
}

#wp-admin-bar ul li ul li {
background-image: none;
}

#wp-admin-bar ul li.align-right {
position: absolute;
right: 0;
}

#wp-admin-bar ul li a {
display: block;
}

#wp-admin-bar ul.main-nav li:hover, #wp-admin-bar ul.main-nav li.sfhover, #wp-admin-bar ul.main-nav li ul li.sfhover {
background-color: #333;
}

/* second-level lists */

#wp-admin-bar ul li ul {
position: absolute;
width: 185px;
left: -999em;
margin-left: 0;
background: #333;
border: 1px solid #222;
-moz-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-webkit-box-shadow:0 4px 8px rgba(0, 0, 0, 0.1);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius-topleft: 0;
-webkit-border-top-left-radius: 0;
-moz-border-radius-topright: 0;
-webkit-border-top-right-radius: 0;
}
#wp-admin-bar ul li > ul {
border-top: none;
}

#wp-admin-bar ul li ul a {
color: #eee;
}

#wp-admin-bar ul li ul li {
float: left;
width: 174px;
margin: 0;
}
#wp-admin-bar ul li ul li:hover a {
color: #fff;
}

#wp-admin-bar ul li div.admin-bar-clear {
clear: both;
}

#wp-admin-bar ul.main-nav li ul li:hover, #wp-admin-bar ul.main-nav li ul li.sfhover, #wp-admin-bar ul.main-nav li ul li.sfhover {
background-color: #222;
}

/* third-and-above-level lists */

#wp-admin-bar ul li ul ul {
margin: -25px 0 0 184px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
#wp-admin-bar ul li ul li:hover ul li a {
color: #eee;
}
#wp-admin-bar ul li ul li ul li:hover a {
color: #fff;
}

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

#wp-admin-bar ul li.align-right:hover ul {
right: 0;
}

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

/* Menu item css */

#wp-admin-bar img.avatar {
float: left;
margin-right: 8px;
}

#wp-admin-bar span.activity {
display: block;
margin-left: 34px;
padding: 0;
}

#wp-admin-bar ul.author-list li a { height: 17px; }

#wp-admin-bar ul li#bp-adminbar-notifications-menu a span {
padding: 0 6px;
margin-left: 2px;
background: #fff;
color: #000;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}

[@jordashtalon Member 15 years, 2 months ago]

@dominikmatus Thanks, that works pretty good.