wp_head() gives me some weird CSS

The fact that

<style type="text/css" media="screen">
    html { margin-top: 32px !important; }
    * html body { margin-top: 32px !important; }
    @media screen and ( max-width: 782px ) {
        html { margin-top: 46px !important; }
        * html body { margin-top: 46px !important; }
    }
</style>

is added for Admin bar by wp-core at the top of the site.

The trick below will remove those CSS out from yout HTML output Just add this code to your functions.php

add_action('get_header', 'my_filter_head');

function my_filter_head() {
   remove_action('wp_head', '_admin_bar_bump_cb');
} 

UPDATE

Answering question-starter request.

1) Admin Bar is showing by default if you’re logged in. It wrapper has id="wpadminbar" in your HTML responce.

It also enqueue /wp-includes/js/admin-bar.min.js script and add “Support Script” at the bottom of page.

2) Admin Bar can be disabled when you’re viewing site for specified users at
Users -> User_Record -> “Show Toolbar when viewing site” checkbox.

Additionally it can be disabled in your functions.php (using show_admin_bar filter as described here How do I remove the admin bar (styling) from frontend only?)

3) In WP source code _admin_bar_bump_cb() looks like this. It can be found at wp-includes/admin-bar.php

function _admin_bar_bump_cb() { ?>
 <style type="text/css" media="screen">
     html { margin-top: 32px !important; }
     * html body { margin-top: 32px !important; }
     @media screen and ( max-width: 782px ) {
         html { margin-top: 46px !important; }
         * html body { margin-top: 46px !important; }
     }
 </style>
 <?php
}

This function is used to be added as action to wp_head inside wp-includes/class-wp-admin-bar.php in this way:

if ( empty($header_callback) )
   $header_callback = '_admin_bar_bump_cb';

   add_action('wp_head', $header_callback);

By removing _admin_bar_bump_cb from action queue you cancel those styles printing

Leave a Comment