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?
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
ing 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
