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

9

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

pseudo
la source

Réponses:

8

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

Zach Lysobey
la source
6
Cela (de manière incorrecte) affecte tous les utilisateurs connectés. Considérez plutôt la réponse de Brent.
Chris Burgess
22

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.

Brent
la source
1
body.admin-bar est le bon sélecteur (et c'est la bonne réponse). La réponse de Zach L affecte tous les utilisateurs connectés, mais seuls les utilisateurs connectés avec des autorisations de modification de contenu ont la barre d'administration visible et ont besoin que l'en-tête soit déplacé vers le bas de la page.
Chris Burgess
intéressant ... Je n'ai jamais personnellement eu de configuration avec des utilisateurs sans ces autorisations. J'imagine que c'est la même chose que si dans les paramètres utilisateur, ils désactivent la barre d'administration.
Zach Lysobey
Remarque sur la version: .admin-barn'apparaît plus dans WordPress 4. Il est maintenant appelé #wpadminbaret n'encapsule pas le contenu, par conséquent, ce qui précède ne peut pas être appliqué à la version 4+
Raptor
Une version SASS est également disponible, avec une explication pour les résolutions mobiles / de bureau (sites Web réactifs
Ministre
Comment cela fonctionnera-t-il une fois que l'utilisateur descendra? Ensuite, la barre de navigation wp sera bloquée "presque en haut de l'écran", ce qui semble plutôt stupide
FooBar
1

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.

Ezzat Ali
la source
1

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')
ykay dit Réintégrer Monica
la source
1
Veuillez modifier votre réponse et ajouter une explication: pourquoi cela pourrait-il résoudre le problème?
fuxia
Changer '.site-header' en 'body' a fait fonctionner cela pour moi.
Kaji
1

Ça marche aussi

body.logged-in > header {  
    margin-top: 32px;  
}  
AnDongNing
la source
Veuillez essayer d'ajouter un peu d'explication - cela permettra au PO et aux futurs utilisateurs d'apprendre et de comprendre ce qui se passe plutôt que d'être simplement un endroit où les gens obtiennent leur code écrit pour eux. Merci de répondre.
Tony Djukic
0

Je viens d'utiliser ce CSS.

body.admin-bar #main-header  {
padding-top: 32px }
JanetE
la source
-1

Essayez ça, ça marche bien

$(document).ready(function() {
    if ($('#wpadminbar')[0]) {
        $('header').css('top', '32px')
    }
});
Andrii khmelovskyi
la source
-2

donner la barre de navigation supérieure

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