粘滞导航和wpadminbar

时间：2014-08-15 作者：sanders

我有一个带有粘性标题导航的网站。问题是，当我登录时wpadminbar 滑倒在导航上。

我的导航代码是：

<div class="container" id ="main">

    <div class="navbar navbar-default navbar-fixed-top">
....
正如您所看到的，我使用引导。有没有办法得到wpadminbar 不要把我的navigaion放在一边？

3 个回复
最合适的回答,由SO网友:Kevin Vess 整理而成

你应该能够保持wpadminbar 通过使用JavaScript或PHP 和CSS.

我会将这个php添加到标题中。主题的php文件：

<?php if ( is_admin_bar_showing() ) { ?>
    <style>
        .my-nav-bar {
            position: absolute;
            top: [wpadminbar-height]px;
        }
    </style>
<?php } ?>
基本上，将绝对导航定位在wpadminbar 当它可见时。

将导航移动到wpadminbar 是使用JavaScript获取wpadminbar 并将其添加到top 导航容器的CSS属性。

或

如果导航是绝对定位的，并且嵌套在div 这与wpadminbar, 您可以将以下内容添加到CSS中：

.container {
    position: relative;
}
.admin-bar .container {
    position: relative;
    padding-top: [wpadminbar-height]px;
}

SO网友:mrwweb

WordPress有一个类，如果您使用body_class() 函数（您应该是！）指示管理栏是否显示：admin-bar. 因此，不需要php或JS。我想你在用position: fixed; 对于.navbar-fixed-top. 如果是这样，只需将以下内容添加到主题的样式表中即可：

.admin-bar .navbar-fixed-top {
    top: 32px; /* if it already has a top value, add 32px to it */
}
还请注意，“mobile”（移动）菜单更高（46px）。如果网站上有人用手机或平板电脑进行编辑，您可能需要添加另一种风格：

@media screen and (max-width: 782px) {
    .admin-bar .navbar-fixed-top {
        top: 46px; /* if it already has a top value, add 46px to it */
    }
}
或者，如果您想采用“移动优先样式”的方法，请翻转这些规则并使用“最小宽度”。

SO网友:user216936
<?php if ( is_admin_bar_showing() ) { ?>
    <style>
        nav {
            position: fixed;
            top: 32px;
        }
        @media screen and (max-width: 768px) {
            #wpadminbar {
                position: fixed;
            }
        }
        
    </style>
<?php } ?>
结束
标签： css   小码农  

相关推荐

自定义帖子类型的条件CSS

我正在使用wordpress主题，该主题使用公文包项目的自定义帖子类型和“集合”对它们进行分类。当我将鼠标悬停在要编辑的“集合”上时，它会在浏览器底部显示：taxonomy=portfoliosets，&；标签id=37（&；post\\U类型=投资组合。我正试图使其标题图像将根据类别或标记而改变。我们有不同的节目，如“视频”和“杂志”等。到目前为止，我已经尝试将以下内容添加到标题中。php：<?php is_single( \'videos\' ) ?> <sty