WordPress Admin Bar Overlapping Twitter Bootstrap Navigation [closed]

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

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.

Related Posts:

  1. Set bootstrap modal body height by percentage
  2. How to Add Admin Bar and Admin Menu or Submenu Notification Bubbles?
  3. Google yolo one tab signup plugin avilable in wordpress? [closed]
  4. CSS – Initial HTML Margin Issue On WordPress Site
  5. custom header navigation has odd spacing [closed]
  6. Change class names dynamically added to html elements by wordpress
  7. Bootstrap News: Image Modifciation
  8. Bootstrap navbar-fixed-top issues [closed]
  9. How am I supposed to use index.html?
  10. Customize Bootstrap checkboxes
  11. Making a
  12. Is there a color code for transparent in HTML?
  13. How to get these two divs side-by-side?
  14. Is there a color code for transparent in HTML?
  15. How does the data-toggle attribute work? (What’s its API?)
  16. How to add hamburger menu in bootstrap
  17. Text-decoration: none not working
  18. css to make bootstrap navbar transparent
  19. Bootstrap 4, How do I center-align a button?
  20. Changing the width of Bootstrap popover
  21. How to center HTML5 Videos?
  22. height style property doesn’t work in div elements
  23. Bootstrap throws Uncaught Error: Bootstrap’s JavaScript requires jQuery
  24. how to center form using bootstrap 4
  25. How to center HTML5 Videos?
  26. vertical divider between two columns in bootstrap
  27. HTML span align center not working?
  28. Bootstrap change carousel height
  29. Table fixed header and scrollable body
  30. Align
  31. Bootstrap 3 Glyphicons CDN
  32. CSS – display: none; not working
  33. How can I change the Bootstrap default font family using font from Google?
  34. Display Images Inline via CSS
  35. CSS/HTML: Create a glowing border around an Input Field
  36. Why CSS3 Animation is not working?
  37. Why is my Bootstrap code not working?
  38. Set textarea width to 100% in bootstrap modal
  39. Creating Accordion Table with Bootstrap
  40. In a bootstrap responsive page how to center a div
  41. Using margin / padding to space span tag from the rest of the p tag
  42. How to make Bootstrap Panel body with fixed height
  43. How to expand textarea width to 100% of parent (or how to expand any HTML element to 100% of parent width)?
  44. Change navbar text color Bootstrap
  45. Removing whitespace between HTML elements when using line breaks
  46. CSS fixed width in a span
  47. Why are my divs overlapping?
  48. How to make canvas responsive
  49. Deregister CSS style link ‘open-sans-css’
  50. raw code vs wordpress
  51. Adding HTML to the Header, Screws up in IE7
  52. Write text below a specific part of a sentence
  53. How to insert html/css/javascript code to wordpress plugin
  54. How to create fa-bars animated menu
  55. Pure CSS to “float” to the right the number of children of an admin_bar child node
  56. Changing CSS FilePath for All Pages
  57. WordPress Multiple Navigation bars
  58. Title has word broken when viewed in mobile [closed]
  59. Disable File Editing function
  60. Some Text of website page on Iphone Safari become invisible
  61. How to buid wordpress menu with auto width sub-menu items in dropdown menu without any items sharing one line [closed]
  62. How to remove the gap on right side of webpage (using Bootstrap with WordPress)?
  63. Simple way to add custom class and ids to individual Gutenberg blocks
  64. Acessing HTML element with no specific tag on it [closed]
  65. How to Add a Read-only Textbox With Text in it That Has a Button to Copy it?
  66. Menu Custom Data Attributes
  67. All of my custom Bootstrap styles are not working in my child theme!
  68. Earlier stylesheet not overriding later one
  69. With over a page of content the footer remains where the bottom of the screen was at top scroll
  70. How to add class to an html output element in tinyMCE paragraph drop down menu
  71. Why I obtain different visualization when I run the website on my local machine and on remote server?
  72. WordPress is not displaying CSS file
  73. I have html form and need to make it work in text editor on template. Only problem is it has .sccs styling file
  74. Hide Tab Titles from Tabs Block
  75. Modal dialog under the backdrop
  76. WordPress footer always at the bottom of the screen-page
  77. Clickable Text To Replace Radio buttons
  78. How to remove the specific class
  79. Img load while refreshing
  80. HTML not resizing
  81. WP Admin Bar transparent on some pages (.screen-reader-shortcut)
  82. Admin bar default color scheme for nonregistered/nonlogged users
  83. How to Compress Css/js code in wordpress and increase loading speed?
  84. Fonts are parsed in one way but rendered in a different way
  85. Divi Theme HTML code is different in View Page Source than in the Firefox Inspector
  86. How to Take Logo Out of Navigation Menu? [closed]
  87. @media applying globally and not separately for each screen width [closed]
  88. How would I add this code to a single WordPress page?
  89. Trouble with adding preloader to my home page index.html and index.js
  90. WP theme update causes child theme CSS problems
  91. How can a left and right margin be added to the admin bar without access to “…wp-includes/admin-bar.php”?
  92. Converting Static HTML pages to WordPress
  93. How to add or remove borders in navigation menu?
  94. How do I hide a specific div class inside ? [closed]
  95. Site layout problems when logged in due to admin bar
  96. Can I upload my HTML/CSS/Javascript game onto a WordPress page?
  97. WordPress site suddenly not showing some DOM elements but mobile is fine
  98. Editing size of h3 tag in wordpress on a one-off basis
  99. IOS Ventura Safari 16.3 position fixed elements goes above scroll bar
  100. Elementor Contact Form Submit button has empty class

Leave a Comment