6

I was trying to enqueue my stylesheets but it didn't work. Turns out I had forgotten to include wp_head() inside my <head> tag. So I did and then my stylesheets where loading fine.

The problem is that a get a CSS value that is not from my stylesheet. And I can also not override it from my stylesheet since it appears to be loading after mine. It started to come up as soon as I included wp_head(). If I delete wp_head() everything looks fine.

This is the weird CSS value that I get:

media="screen" 
html {
    margin-top: 32px !important;
}

As you can understand this is a problem since I know have a 32px margin on top of my websites. And as I stated before, I have no idea where this value comes from. I use no plugins and the only stylesheet enqueued is my style.css and this value is not from that file. In the "console" it says that the value comes from "index" on line 334. But I got nothing there, so it must be something from WP?

Can anyone explain to me where this value comes from? And how do I change it?

Improve this question

1 Answer 1

Reset to default
10

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

Improve this answer
3
  • Ah, I see know that if I logged out this value dissapear. I am new to WP and still trying to learn. So I would be happy if you could explain this a bit more. If this code is to give space for the adminbar, why can't I see the adminbar? Am I supposed to see the adminbar on home.php when I am logedin? If not why does WP have a code that affects my home.php? The codes you posted, what does it do? And how does it affect the visibiltiy of the adminbar?
    – Alex
    Commented Sep 1, 2015 at 10:22
  • Updated answer considering your questions.
    – Ignat B.
    Commented Sep 1, 2015 at 12:04
  • 1
    Consdering your isssue about "Why you cant see adminbar but still see 32px margins". I dont know the background of your template but i know it ususally happens when developers try to disable sidebar part-by-part in old-manner, forgetting about show_admin_bar filter
    – Ignat B.
    Commented Sep 1, 2015 at 12:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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