Problemă cu bara de administrare și antetul fix în WordPress

Încearcă să adaugi acest cod în fișierul tău CSS:

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

Declarația body.admin-bar de la început va asigura că aceste stiluri se aplică doar când bara de administrare este vizibilă.

Încearcă acest lucru pentru WordPress 4+. Verifică dacă bara de administrare este prezentă și, dacă da, mută antetul fixat puțin mai jos pentru a compensa.

    //remediere pentru bara de administrare
    if ($('#wpadminbar')[0])
        $('.site-header').css('top', '32px')

Acest lucru funcționează de asemenea

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

Am citit toate răspunsurile, dar nu am găsit acesta:

De ce să nu folosești funcția wp:

is_admin_bar_showing()

exemplu din fișierul header.php al temei

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

Cred că pe dispozitivele cu lățimi mai mici, wpadminbar nu este poziționat fix. Așadar, dacă derulezi documentul pe un smartphone, bara de administrare va urmări scroll-ul și nu va rămâne în partea de sus a ferestrei. Ținând cont de acest aspect, de ce să nu adăugăm niște JavaScript în subsolul temei tale, imediat după apelul wp_head(). În acest fel, putem ținti lățimea dispozitivului și dacă documentul are sau nu adminbar. Apoi, pur și simplu creăm niște reguli CSS și le adăugăm în head-ul documentului - ca mai jos!

<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( 'spațiul wpadmibar este acoperit' );
    }
})();
</script>

Presupunând că navigația ta are clasa 'main-navigation' și la scroll adaugi o altă clasă numită 'fixed'. Schimbă CSS-ul pentru a ținti panoul tău de navigație prin înlocuirea lui 'body.admin-bar .main-navigation.fixed' cu orice ai dori să folosești pentru a ținti al tău.

Poate fi îmbunătățit, de exemplu, verificând dacă bara de administrare este fixă sau nu, dar pentru moment, sper că te va ajuta.

Tocmai am folosit acest CSS.

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

Încearcă asta, funcționează perfect

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

afișează bara de navigare superioară

.navbar-fixed-top {
    border-width: 0 0 1px;  /* grosimea bordurii - 0 sus, 0 dreapta, 1px jos */
    padding: 0;             /* fără padding */
    position: relative!     /* poziționare relativă (important) */
}