Barre d'administration et problème d'en-tête fixe?

J'ai stylé mon en-tête pour avoir une position supérieure fixe. Une fois connecté à wordpress, la barre de navigation de l'administrateur wp couvre la partie supérieure de mon en-tête, rendant impossible l'accès à ma navigation supérieure. Je voudrais que le nav d'administration wp pousse ma navigation supérieure ci-dessous pour que les deux soient visibles. Quelqu'un connaît-il une solution pour résoudre ce problème?

Un exemple de mon problème peut être trouvé sur ... www.nickriversdesign.com/dev

dans votre css, vous pouvez essayer quelque chose comme: body.logged-in{margin-top:20px;}ou si cela ne fonctionne pas avec un autre code utilisant la .logged-inclasse

Essayez d'ajouter ceci à votre fichier CSS:

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

la body.admin-bardéclaration à l'avant s'assurera que ces styles ne sont appliqués que lorsque la barre d'administration est visible.

Je crois que, sur les appareils avec des largeurs plus petites, wpadminbar n'est pas positionné fixe. Donc, si vous faites défiler le document dans un smartphone, la barre d'administration suivra le défilement et ne restera pas en haut de la fenêtre. En gardant cela à l'esprit, pourquoi ne pas ajouter du javascript dans le pied de page de votre thème juste après l' wp_head()appel. De cette façon, nous pouvons cibler la largeur de l'appareil et si le document a ou non la barre d'administration. Ensuite, créez simplement quelques règles CSS et ajoutez-les à la tête du document - comme ci-dessous!

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

En supposant que votre nav a une classe 'main-navigation'et que vous faites défiler, vous ajoutez une autre classe qui lui est nommée 'fixed'. Modifiez le CSS pour cibler votre panneau de navigation en le remplaçant 'body.admin-bar .main-navigation.fixed'par celui que vous souhaitez cibler le vôtre.

Il peut être encore amélioré, par exemple en vérifiant si la barre d'administration est fixe ou non, mais pour l'instant, j'espère que cela vous aidera.

Essayez ceci pour WordPress 4+. Il vérifie si la barre d'administration est présente et si c'est le cas, déplacez l'en-tête fixe vers le bas pour compenser.

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

Ça marche aussi

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

Je viens d'utiliser ce CSS.

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

Essayez ça, ça marche bien

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

donner la barre de navigation supérieure

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