Barra de administrador e problema de cabeçalho corrigido?

Eu denominei meu cabeçalho para ter uma posição superior fixa. Enquanto estiver logado no wordpress, a barra de navegação do administrador do wp cobre a seção superior do meu cabeçalho, tornando impossível o acesso à minha navegação superior. Gostaria que o wp admin nav empurre minha navegação superior abaixo para que ambos fiquem visíveis. Alguém conhece alguma solução para corrigir esse problema?

Um exemplo do meu problema pode ser encontrado em ... www.nickriversdesign.com/dev

no seu css, você pode tentar algo como: body.logged-in{margin-top:20px;}ou se isso não funcionar com outro código usando a .logged-inclasse

Tente adicionar isso ao seu arquivo CSS:

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

a body.admin-bardeclaração na frente garantirá que esses estilos sejam aplicados apenas quando a barra de administração estiver visível.

Eu acredito que, em dispositivos com larguras menores, o wpadminbar não está posicionado fixo. Portanto, se você rolar o documento em um smartphone, a barra de administrador seguirá a rolagem e não ficará na parte superior da janela. Com isso em mente, por que não adicionar javascript no rodapé do seu tema logo após a wp_head()chamada. Dessa forma, podemos segmentar a largura do dispositivo e se o documento possui ou não a barra de administração. Em seguida, basta fazer algumas regras CSS e anexá-lo ao cabeçalho do documento - como abaixo!

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

Supondo que sua navegação tenha uma classe 'main-navigation'e, no pergaminho, você adiciona outra classe nomeada 'fixed'a ela. Altere o CSS para direcionar seu painel de navegação, substituindo pelo que 'body.admin-bar .main-navigation.fixed'você deseja direcionar para o seu.

Pode ser melhorado, por exemplo, verificando se a barra de administração está fixa ou não, mas, por enquanto, espero que ajude.

Tente isso para o WordPress 4+. Ele verifica se a barra de administração está presente e, se estiver, mova o cabeçalho fixo um pouco para baixo para compensar.

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

Isso funciona bem

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

Eu apenas usei esse CSS.

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

Tente isso, funciona bem

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

dê a barra de navegação superior

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