web-dev-qa-db-fra.com

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

J'ai stylé mon en-tête pour avoir une position haute fixe. Lorsque vous êtes connecté à wordpress, la barre de navigation de l’administrateur wp couvre la partie supérieure de mon en-tête, ce qui rend impossible l’accès à ma navigation par le haut. J'aimerais que le navigateur de l'administrateur wp pousse mon haut de la page de navigation ci-dessous pour que les deux soient visibles. Est-ce que quelqu'un connaît une solution pour résoudre ce problème?

Vous trouverez un exemple de mon problème sur ... www.nickriversdesign.com/dev

headersadmin-bar
8
Nick

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 classe .logged-in

8
Zach Lysobey

Essayez d'ajouter ceci à votre fichier CSS:

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

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

21
Brent

Essayez ceci pour WordPress 4+. Il vérifie si la barre d'administration est présente et, le cas échéant, déplace un peu l'en-tête fixe pour compenser.

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

Je crois que sur les appareils de largeur inférieure, wpadminbar n’est pas positionné de manière 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 code javascript dans le pied de page de votre thème juste après l'appel wp_head(). De cette façon, nous pouvons cibler la largeur du périphérique et savoir si le document possède ou non la barre d’administration. Ensuite, créez simplement des règles CSS et ajoutez-les à l'en-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 qu'au défilement vous ajoutez une autre classe nommée 'fixed'. Modifiez le code CSS pour cibler votre panneau de navigation en remplaçant 'body.admin-bar .main-navigation.fixed' par le moyen par lequel vous souhaitez cibler le vôtre.

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

1
Ezzat Ali