Tell me more ×
WordPress Answers is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.
up vote 0 down vote favorite

I am having an issue with the WordPress admin bar overlapping the twitter bootstrap (2.3.0) nav bar. I have tried this fix:

body.admin-bar .navbar-fixed-top {
    top: 28px;
}

.navbar .brand {
    color: #000 !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 30px
        rgba(255, 255, 255, 0.125);
    font-weight: bold !important;
}

.nav-container {
    padding-left: 0;
    padding-right: 0;
}

.nav-tabs, .nav-pills {
    margin-top: -6px;
}

.dropdown-menu li>a:hover,.dropdown-menu li>a:focus,.dropdown-submenu:hover>a
    {
    color: #fff !important;
}

#inner-header {
    width: 100%;
}

input,textarea,select,.uneditable-input {
    margin-bottom: 0;
}

.navbar-form,.navbar-search {
    margin: 0 0 9px;
}

.navbar-search {
    padding-left: 0;
}

#s {
    width: 100px;
}

but alas it is still posing an issue. I am wondering what fixes are available?

share|improve this question

3 Answers

up vote 1 down vote accepted

you can try this: 

   .navbar-fixed-top { top: 0px; }
    body.admin-bar .navbar-fixed-top { top: 28px !important; }

if that does work for you (which it should!), then you'll have to move the wp admin bar to the bottom by sticking the code below into a plugins folder or your functions.php file:

function fb_move_admin_bar() {
    echo '
    <style type="text/css">
    body { 
    margin-top: -28px;
    padding-bottom: 28px;
    }
    body.admin-bar #wphead {
       padding-top: 0;
    }
    body.admin-bar #footer {
       padding-bottom: 28px;
    }
    #wpadminbar {
        top: auto !important;
        bottom: 0;
    }
    #wpadminbar .quicklinks .menupop ul {
        bottom: 28px;
    }
    </style>';
}
// on backend area
add_action( 'admin_head', 'fb_move_admin_bar' );
// on frontend area
add_action( 'wp_head', 'fb_move_admin_bar' );

as an alternative you can use this plugin

i dont really like using plugins because most of theme load my script with bogus codes i dont need... solution 1 and 2 above works fine, but if it doesnt work for you, you can try solution 3 below:

function stick_admin_bar_to_bottom_css() {
echo "

html {
padding-bottom: 28px !important;
}

body.admin-bar {
margin-top: -28px;
}

#wpadminbar {
top: auto !important;
bottom: 0;
}

#wpadminbar .quicklinks .menupop ul {
bottom: 28px;
}

";
}

add_action('admin_head', 'stick_admin_bar_to_bottom_css');
add_action('wp_head', 'stick_admin_bar_to_bottom_css');

That seemed to work for me fine without the 28px issues..

share|improve this answer
up vote 1 down vote

It didn't work for me until I added this to the body tag:

<body <?php body_class(); ?>>

Then it worked fine!

share|improve this answer
up vote 0 down vote

Didn't work for me, but I found a nice fix. In your header.php use the wordpress function to query if the toolbar is displayed, and then create an empty div below the navbar div:

<div class="navbar navbar-inverse navbar-fixed-top">
<?php 
  // Fix menu overlap bug..
  if ( is_admin_bar_showing() ) echo '<div style="min-height: 28px;"></div>'; 
?>
<div class="navbar-inner">
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.