Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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

closed as off-topic by kaiser May 7 at 20:10

This question appears to be off-topic. The users who voted to close gave this specific reason:

If this question can be reworded to fit the rules in the help center, please edit the question.

6 Answers 6

up vote 1 down vote accepted

How to prevent the WordPress admin bar from overlapping with your Twitter Bootstrap navigation bar.

In response to: WordPress admin bar overlapping twitter bootstrap navigation

Asked by: @TheWebs

If you are using Twitter Bootstrap with WordPress and have an issue with the WordPress admin bar overlapping with your navigation bar, you're probably pretty frustrated with some of these answers. I looked for solutions everywhere before ultimately deciding to just down-shift to a lower gear and figure out a solution that does exactly what I need it to do.

So here is an answer that doesn't hide the WordPress admin bar, or move the WordPress admin bar to the bottom of your pages. This answer will keep the WordPress admin bar right where it belongs... At the top of your pages.

Please note this will take a few short steps to complete, but it's worth it. It's not really a complicated or time consuming process. I just wanted to make sure the explanation on how to do so was clear and easy to follow/understand.


Step 1

Themes have a template tag for the body tag which will help theme authors to style more effectively with CSS. The Template Tag is called body_class. This function gives the body element different classes and can be added, typically, in the header.php's HTML body tag.

  1. Open your currently active WordPress theme using Twitter Bootstrap directory. Find header.php and open it.
  2. Find <body>.
  3. Replace with <?php echo '<body class="'.join(' ', get_body_class()).'">'.PHP_EOL; ?>

After completing the three steps above, you have now successfully enabled your WordPress theme with WordPress body classes.

Step 2 (OPTIONAL!)

  • Add custom conditional CSS classes to the <body> tag.

By default, WordPress already provides a list of default classes to the HTML tag, if you are using the body_class() or get_body_class() functions.

If you view the source code of any rendered front-end page on your WordPress website, you will notice two of the CSS classes automatically added to the HTML <body> tag are "logged-in" and "admin-bar".

You will also notice those CSS class names are only added to the HTML <body> tag if the user is logged in, otherwise they won't be added to the HTML <body> tag.

So if you don't want to use the default WordPress CSS class names, you can add your own very easily.

  1. Open your currently active WordPress theme using Twitter Bootstrap directory. Find functions.php and open it.
  2. Add add_filter('body_class', 'mbe_body_class'); to the top of the file.
  3. Add the following code, to the bottom of the file.

The code:

function mbe_body_class($classes){
    if(is_user_logged_in()){
        $classes[] = 'body-logged-in';
    } else{
        $classes[] = 'body-logged-out';
    }
    return $classes;
}

Now, if you view the source code of any rendered front-end page on your WordPress website, if the user is logged in, you will see "body-logged-in" has been added to the HTML <body> tag, and if the user is logged out, you will see "body-logged-out" has been added to the HTML <body> tag.

Step 3

  • Add the CSS code to your theme.

This is the section of code which will correct your theme to display both the WordPress admin bar, and your Twitter Bootstrap navigation properly, whether the user is logged in or logged out of your website.

  1. Open your currently active WordPress theme using Twitter Bootstrap directory. Find functions.php and open it.
  2. Add add_action('wp_head', 'mbe_wp_head'); to the top of the file.
  3. Add the following code, to the bottom of the file.

The code:

function mbe_wp_head(){
    echo '<style>'.PHP_EOL;
    echo 'body{ padding-top: 70px !important; }'.PHP_EOL;
    // Using custom CSS class name.
    echo 'body.body-logged-in .navbar-fixed-top{ top: 28px !important; }'.PHP_EOL;
    // Using WordPress default CSS class name.
    echo 'body.logged-in .navbar-fixed-top{ top: 28px !important; }'.PHP_EOL;
    echo '</style>'.PHP_EOL;
}

There you have it. If the user is logged in, you should now have the WordPress admin bar at the very top of your page, immediately followed by your Twitter Bootstrapped navigation. If the user is logged out of your WordPress website, your Twitter Bootstrap navigation should still display appropriately at the top of your website.

share|improve this answer
    
You saved my time, thanks :) –  Sisir Nov 22 at 10:01

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
    
Great fix. I like that this is much simpler than the accepted answer and that it looks for is_admin_bar_showing(), not just if the user is logged in, which is good considering someone may be logged in, but turned off the admin bar. Thanks! –  Mark Rummel May 15 at 18:49
    
As of WordPress 3.8, the admin bar height is 32px. –  chicoman98 Oct 31 at 9:41

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

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

Perfect! Just what I was looking for, however, I did something a little differently in step 3. Not sure that it matters but my code looks like this...

    function mbe_wp_head(){
    echo '<style>'.PHP_EOL;
    echo 'body{ padding-top: 70px !important; }'.PHP_EOL;
    // Using custom CSS class name.
    echo 'body.body-logged-in .navbar-fixed-top{ top: 28px !important; }'.PHP_EOL;
    // Using WordPress default CSS class name.
    echo 'body.logged-in .navbar-fixed-top{ top: 28px !important; }'.PHP_EOL;
    echo '</style>'.PHP_EOL;
}
add_action('wp_head', 'mbe_wp_head');

You mentioned adding in different places, but I have always done it like this and it seems to work just fine. Thanks for the fix!

share|improve this answer
    
And what exactly did you do different? –  kaiser May 7 at 17:21

Fix for Bootstrap 'navbar-fixed-top' to prevent overlapping of site menu with WordPress admin menu

.admin-bar .navbar-fixed-top { top:46px; @media screen and (min-width:782px) { top:32px; } }
share|improve this answer

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