Wordpress - WordPress Admin Bar Overlapping Twitter Bootstrap Navigation

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
  if ( is_admin_bar_showing() ) echo '<div style="min-height: 32px;"></div>'; 
?>
<div class="navbar-inner">

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

  • Add get_body_class(); to your theme's <body> tag.

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

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

EDIT TO CODE

add_action('wp_head', 'mbe_wp_head');
function mbe_wp_head(){
    echo '<style>'
    .PHP_EOL
    .'body{ padding-top: 70px !important; }'
    .PHP_EOL
    .'body.body-logged-in .navbar-fixed-top{ top: 46px !important; }'
    .PHP_EOL
    .'body.logged-in .navbar-fixed-top{ top: 46px !important; }'
    .PHP_EOL
    .'@media only screen and (min-width: 783px) {'
    .PHP_EOL
    .'body{ padding-top: 70px !important; }'
    .PHP_EOL
    .'body.body-logged-in .navbar-fixed-top{ top: 28px !important; }'
    .PHP_EOL
    .'body.logged-in .navbar-fixed-top{ top: 28px !important; }'
    .PHP_EOL
    .'}</style>'
    .PHP_EOL;
}

This version of the mbe_wp_head function includes a mobile-first media query, to ensure that your header is pushed down the proper distance. For mobile, the WP admin bar is 48px tall. After the 783px breakpoint, the admin bar shortens to only 28px tall.

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.


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..

Tags:

Html

Css

Navigation

Twitter Bootstrap

Admin Bar

Recent Posts