Проблема с админ-панелью и фиксированным заголовком?

Попробуйте добавить это в ваш CSS файл:

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

Объявление body.admin-bar в начале гарантирует, что эти стили будут применяться только когда видна административная панель.

Попробуйте это решение для WordPress 4+. Оно проверяет наличие админ-бара и при его наличии сдвигает фиксированный заголовок вниз, чтобы компенсировать это.

    // исправление для админ-бара
    if ($('#wpadminbar')[0])
        $('.site-header').css('top', '32px')

Это также работает

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

Я прочитал все ответы, но не нашел такого варианта:

Почему бы не использовать функцию WordPress:

is_admin_bar_showing()

пример файла темы header.php

<nav class="nav-default" style="<?php echo is_admin_bar_showing() ? 'top: 32px' : ''; ?>">

Я считаю, что на устройствах с меньшей шириной экрана wpadminbar не имеет фиксированного позиционирования. Таким образом, при прокрутке документа на смартфоне админ-панель будет следовать за скроллом и не останется в верхней части окна. Учитывая это, почему бы не добавить немного JavaScript в подвал вашей темы сразу после вызова wp_head(). Таким образом, мы можем определить ширину устройства и наличие админ-панели в документе. Затем просто создадим несколько 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>

Предполагая, что ваша навигация имеет класс 'main-navigation', а при скролле добавляется ещё один класс 'fixed'. Измените CSS, чтобы нацелиться на вашу панель навигации, заменив 'body.admin-bar .main-navigation.fixed' на тот селектор, который вам нужен.

Это можно дополнительно улучшить, например, проверив, зафиксирована ли админ-панель или нет, но пока надеюсь, что это поможет.

Я просто использовал этот 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!
}