移除管理栏的 28 像素下推 | CSS-Tricks

Wordpress 黑粉

# 2013 年 7 月 24 日

我真的很讨厌wordpress

Balaji

# 2013 年 7 月 24 日

谢谢 :)

Goran

# 2013 年 7 月 25 日

嗨

这意味着对于登录用户来说，管理栏仍然会显示，但它会覆盖前 28 像素，而不是将它们向下推吗？

katehudson

# 2013 年 10 月 1 日

结合这段代码，你可以为管理员显示管理栏，并为其他任何人（订阅者等）隐藏它。

if(current_user_can('manage_options') == 1){
    show_admin_bar(true);
}else{
    show_admin_bar(false);
}

Tali

# 2013 年 11 月 3 日

你刚刚解决了我的一个心头之患！谢谢！

charles

# 2013 年 11 月 20 日

这对我不起作用

vvvoid

# 2014 年 2 月 11 日

在最新的 WordPress 中不起作用。

Ryu

评论永久链接# 2014 年 3 月 15 日

尝试将此添加到你的主题中的 <head> 和 </head> 之间。

html { margin-top: 0px !important; }
* html body { margin-top: 0px !important; }
@media screen and ( max-width: 782px ) {
html { margin-top: 0px !important; }
* html body { margin-top: 0px !important; }
}

这对我有用。 :)
Ryu

评论永久链接# 2014 年 3 月 15 日

在你的主题头部中的 head 标签之间。

Theodore M. Wallerstedt II

# 2014 年 3 月 30 日

我们是否有 2014 年版本的如何停止向下推的方法？我不想使用 Ryu 的解决方案，因为这意味着有重复的冲突代码，我确信这不是 W3C 的解决方案——而且你跨浏览器测试过它了吗？Ryu，我在看着你。喜欢你的作品，Chris——你有什么想法可以创建一个函数在 3.8.1 中移除向下推吗？我使用 Roots，所以我尽量保持简洁，你知道的。

Luka Savic

# 2014 年 4 月 23 日

以下是适用于 WP 3.8.x 及更高版本的版本。

add_theme_support( 'admin-bar', array( 'callback' =&gt; '__return_false' ) );

Ben

# 2014 年 8 月 28 日

html[lang] {
  margin-top: 0 !important;
}

... 这就是全部 :)

Stefan

评论永久链接# 2016 年 2 月 10 日

太对了：D
感谢你的这段代码
Dan

评论永久链接# 2016 年 11 月 25 日

英雄 :)

Caroline

# 2014 年 10 月 3 日

非常感谢！！我无法解决这个问题，但是将 PHP 代码片段添加到 functions.php 文件后，它完美地运行了（以及 WP 4.0）！太棒了！

Rebekkah Hilgraves

# 2014 年 10 月 19 日

也许我太简单了，但是你也可以在登录时通过用户配置文件禁用管理栏。

Marc Heatley

# 2014 年 11 月 17 日

我意识到我参加这个聚会有点晚了，但这仍然很痛苦。我倾向于将所有标记都包装在 .wrapper 中，它可以是 position:relative;，这样可以处理所有绝对定位的元素，然后我有一个 SASS 混合可以帮助你在使用 position:fixed 或其他任何地方。

@mixin wp-admin-bump{
  .admin-bar & {
      margin-top: 46px;
      @media screen and (min-width: 782px){
        margin-top: 32px;
      }
    }
}

希望这能帮助到某人。我创建了一个 Gist 以便于重复使用。

Mike

# 2015 年 1 月 6 日

对我来说，解决方案是 add_theme_support( 'admin-bar', array( 'callback' => '__return_false' ) ); 在 functions 文件中。

Brown

评论永久链接# 2017 年 5 月 28 日

谢谢 Mike。你的代码解决了我的网站页面最顶端出现的管理栏的空布局...

ciar4n

# 2015 年 2 月 14 日

我需要在这里被纠正，但是 WordPress 没有为它添加一个类到 body 标签吗？例如，如果你有一个被管理面板覆盖的粘性头部，那么只需使用以下 CSS...

...
.my-sticky-header {
top: 0px;
}
.admin-bar .my-sticky-header {
top: 32px;
}
...

}

如果 admin-bar 为真，那么你的粘性头部将被向下推 32 像素。

Ciarán

James Clark

评论永久链接# 2015 年 9 月 17 日
Ciar4n 的解决方案对我和我的粘性横幅有效。太简单了——谢谢！

Wesley Chubbington

评论永久链接# 2018 年 4 月 26 日
这对我有用，谢谢！

Digio

评论永久链接# 2018 年 7 月 25 日

太棒了！这节省了我们很多时间！

干杯

Wiliam

评论永久链接# 2015 年 3 月 8 日

在我的 ‘admin_bar_init’ 操作中有效。

Angela

评论永久链接# 2015 年 7 月 16 日

Mike 的解决方案在 4.2.2 中对我有用。谢谢！

Ryan

评论永久链接# 2015 年 7 月 31 日

<?php
function _admin_bar_bump_cb_mod() { ?>
<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: 0px !important; }
        * body { padding-top: 46px !important; }
    }
</style>
<?php
}
function my_filter_head() {
    remove_action('wp_head', '_admin_bar_bump_cb');
    add_action('wp_head', '_admin_bar_bump_cb_mod');
}
add_action('get_header', 'my_filter_head');
?>

Mike 的解决方案在 4.2.2 中对我有用。谢谢！

我在具有粘性头部/页脚的主题中运行 bootstrap，并遇到了这个问题。我创建了一个钩子，可以添加到我的 functions.php 文件中。它通过从 html 中移除边距，并在媒体查询部分添加 body 的顶部填充来工作。我还没有在 bootstrap 之外测试过。
评论永久链接# 2015 年 7 月 31 日

我对这个解决方案感到很兴奋，以至于我忘记在没有管理栏的情况下测试它。基于填充修复。忽略上面的内容，因为它在注销时会在顶部留下一个空格。这是我的新解决方案。
```
//de-register _admin_bar_bump_cb default behavior
function my_filter_head() {
  remove_action('wp_head', '_admin_bar_bump_cb');   
}
add_action('get_header', 'my_filter_head');
```
添加到 functions.php
```
body.admin-bar {
    padding-top:32px;   
}
@media screen and ( max-width: 782px ) {
    body.admin-bar {
        padding-top:32px;   
    }
}
```

添加到 style.css（或主题样式）文件中

Munnie

评论永久链接# 2015 年 12 月 27 日

对我有用。谢谢！我一直在花时间搜索 CSS 代码，但这在一分钟内就解决了我的问题！

Steve

评论永久链接# 2016 年 2 月 29 日

Ryan 谢谢你！你的解决方案完美地运行了！

Santiago Cerro

评论永久链接# 2016 年 3 月 7 日

//Remove Admin Bar Html

if (!function_exists("loc_ca_remove_html_margin_admin_bar")) {
    function loc_ca_remove_html_margin_admin_bar() {
        if(is_admin_bar_showing()) {
            ?>
           <style type="text/css" media="screen">
               html { margin-top: 0px !important; }
               * html body { margin-top: 0px !important; }
           </style>
            <?php
        }
    }
}
add_action ("wp_head", "loc_ca_remove_html_margin_admin_bar", 999);

这对我有用，你只需要为操作提供最低优先级。

Alex C

评论永久链接# 2016 年 4 月 12 日
在我的情况下，我有一个固定标题，所以内容会在它下面向上滚动。当然，管理栏也是一个固定标题，并且该栏会重叠在我的标题容器顶部。因此，我添加了一个简单的 PHP 代码来显示登录时的 ID。然后使用 top:32px; 来向下推标题容器，如果显示了管理栏。以下是代码。（注意，此 PHP 代码可以放置在任何位置，不仅仅是 Header 标签）

<

header >

所以当未登录时，你会看到

<

header >
当登录时，你会看到

<

header id=”adminbarfix”>

然后只需将此 CSS 添加到标签之上，如下所示

#adminbarfix {top:32px;}

或者在你的 styles.css 文件中，如下所示
#adminbarfix {top:32px;}

当然，你也可以使用类而不是 ID。你也可以在登录时使用此代码来完成其他一些很酷的事情 :) 希望这能有所帮助

这对我有用，你只需要为操作提供最低优先级。

# 2016 年 4 月 12 日

请删除我的最后一条评论，因为我没有写正确

评论永久链接# 2016 年 4 月 12 日
在我的情况下，我有一个固定标题，所以内容会在它下面向上滚动。当然，管理栏也是一个固定标题，并且该栏会重叠在我的标题容器顶部。因此，我添加了一个简单的 PHP 代码来显示登录时的 ID。然后使用 top:32px; 来向下推标题容器，如果显示了管理栏。以下是代码。（注意，此 PHP 代码可以放置在任何位置，不仅仅是 Header 标签）

 <header <?php 
  // Fix menu overlap bug..
  if ( is_admin_bar_showing() ) echo 'id="adminbarfix"'; 
?>>

所以当未登录时，你会看到

<header >

当登录时，你会看到

 <header id="adminbarfix">

然后只需将此 CSS 添加到标签之上，如下所示

<style>
#adminbarfix {top:32px;}
</style>

或者在你的 styles.css 文件中，如下所示

#adminbarfix {top:32px;}

当然，你也可以使用类而不是 ID。你也可以在登录时使用此代码来完成其他一些很酷的事情 :) 希望这能有所帮助

BobDi

# 2016 年 5 月 16 日

谢谢 Ryan！救了我的日子。你的第二个建议完美地解决了问题。

adir

# 2016 年 10 月 6 日

针对当前的 WordPress 版本 4.6.1 的正确答案

移除管理栏的 28 像素下推

Matt

# 2017 年 3 月 10 日

你只需将一个 CSS 选择器添加到 HTML 元素即可。我仅在 FireFox 中测试过。将以下代码添加到主题中的 styles.css 文件中

html:first-of-type {margin-top:0 !important;} #wpadminbar {margin-top:-32px;}

如果你想将管理栏变成一个下拉菜单（留下 1 像素的线来悬停并放下管理栏），例如在开发主题和插件时

html:first-of-type {margin-top:0 !important;} #wpadminbar {margin-top:-31px;} #wpadminbar:hover {margin-top: 0;} #wpadminbar { -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }

对我有用。谢谢！我一直在花时间搜索 CSS 代码，但这在一分钟内就解决了我的问题！

# 2017 年 5 月 11 日

你只需在你的 opening body 标签之后（在 header.php 中）添加以下代码，以向下推所有内容，确保没有任何内容被管理栏覆盖。

<?php if ( is_admin_bar_showing() ) echo '<style>header {position:relative;top:0;}</style>'; ?>

Flimm

# 2019 年 5 月 29 日

有一个更简单的解决方案可以隐藏管理栏并在较新版本的 WordPress（截至撰写本文时为 5.2.1）中删除 CSS。以下是它，将其放在主题的 functions.php 中

show_admin_bar(false);

Max

# 2019 年 7 月 16 日

这对我来说不再有效（大约是在 WordPress 5 左右？），我在搜索 _admin_bar_bump_cb 时发现 WP 管理栏的源代码——https://developer.wordpress.org/reference/classes/wp_admin_bar/——有一个没有记录的说明

/**
 * To remove the default padding styles from WordPress for the Toolbar, use the following code:
 * add_theme_support( 'admin-bar', array( 'callback' => '__return_false' ) );
 */

希望这能为你们节省一些搜索时间。

Dale

# 2019 年 8 月 29 日

我选择根据管理栏是否存在来调整 CSS，将其粘贴到标题中...

#topbar{ top: px; }
html { margin-top: px !important;}
* html body { margin-top: px !important;}

我需要能够看到顶部的栏，但仍然希望在需要时使用管理栏。

评论

Leave a Reply Cancel reply