Problema con la barra di amministrazione e l'header fisso?

Prova ad aggiungere questo al tuo file CSS:

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

la dichiarazione body.admin-bar all'inizio farà sì che questi stili vengano applicati solo quando la barra di amministrazione è visibile.

Prova questa soluzione per WordPress 4+. Verifica se la barra di amministrazione è presente e, in caso affermativo, sposta l'header fisso un po' più in basso per compensare.

    //fix per la barra di amministrazione
    if ($('#wpadminbar')[0])
        $('.site-header').css('top', '32px')

Funziona anche questo

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

Ho letto tutte le risposte ma non ho trovato questa:

Perché non utilizzare la funzione wp:

is_admin_bar_showing()

esempio nel file header.php del tema

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

Credo che sui dispositivi con larghezze più piccole, la wpadminbar non sia posizionata in modo fisso. Quindi, se si scorre il documento su uno smartphone, la barra di amministrazione seguirà lo scroll e non rimarrà in cima alla finestra. Tenendo questo a mente, perché non aggiungere un po' di javascript nel footer del tuo tema subito dopo la chiamata wp_head(). In questo modo possiamo individuare la larghezza del dispositivo e verificare se il documento ha la adminbar. Poi semplicemente creiamo alcune regole CSS e le aggiungiamo all'head del documento - come mostrato sotto!

<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>

Assumendo che la tua navigazione abbia una classe 'main-navigation' e che allo scroll aggiungi un'altra classe chiamata 'fixed'. Modifica il CSS per puntare al tuo pannello di navigazione sostituendo 'body.admin-bar .main-navigation.fixed' con qualsiasi selettore tu voglia usare per il tuo caso.

Può essere ulteriormente migliorato, ad esempio verificando se la barra di amministrazione è fissata o meno, ma per ora spero che possa essere d'aiuto.

Ho appena utilizzato questo CSS.

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

Prova questo, funziona bene

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

fornisci la barra di navigazione superiore

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