尝试将此添加到CSS文件：

body.admin-bar #branding-wrap{top: 28px;} 
body.admin-bar #wrapper{margin-top: 145px;}

This works as well

body.logged-in > header {  
    margin-top: 32px;  
}  

我相信，在宽度较小的设备上，wpadminbar的位置不是固定的。因此，如果您在智能手机中滚动文档，管理栏将跟随滚动，而不会停留在窗口顶部。记住这一点，为什么不在主题的页脚后面添加一些javascript呢wp_head() 呼叫通过这种方式，我们可以确定设备宽度以及文档是否具有adminbar。然后简单地制定一些CSS规则并将其附加到文档头，如下所示！

<script>
( function(e) {
    var ab = document.getElementById( \'wpadminbar\' );
    if ( typeof( ab ) === \'object\' && window.innerWidth >= 610 ) {
        var abh = ab.offsetHeight || ab.clientHeight || ab.scrollHeight;
        var style = document.createElement( \'style\' );
        style.id = \'adminbar_main_nav_controle_rules\';
        document.getElementsByTagName( \'head\' )[0].appendChild( style );
        var rules = document.createTextNode( \'body.admin-bar .main-navigation.fixed { margin-top: \' + abh + \'px !important; }\' );
        style.appendChild( rules );
        console.debug( \'wpadmibar space is covered\' );
    }
})();
</script>

它可以进一步改进，例如检查管理栏是否已修复，但现在，我希望它会有所帮助。

在WordPress 4+上试试这个。它检查管理栏是否存在，如果存在，则将固定标题向下移动一点以进行补偿。

    //fix for admin bar
    if ($(\'#wpadminbar\')[0])
        $(\'.site-header\').css(\'top\', \'32px\')

我刚刚使用了这个CSS。

body.admin-bar #main-header  {
padding-top: 32px }

试试这个，很好用

$(document).ready(function() {
    if ($(\'#wpadminbar\')[0]) {
        $(\'header\').css(\'top\', \'32px\')
    }
});

给出顶部导航栏

.navbar-fixed-top {
    border-width: 0 0 1px;
    padding: 0;
    position: relative!
}