it-swarm.com.de

Admin-Leiste und Header-Problem behoben?

Ich habe meinen Header so gestylt, dass er eine feste Spitzenposition einnimmt. Während ich bei WordPress angemeldet bin, verdeckt die Navigationsleiste von wp admin den oberen Bereich meines Headers, sodass ich nicht mehr auf meine Top-Navigation zugreifen kann. Ich möchte, dass das wp admin nav meine Top-Navigation unten drückt, damit beide sichtbar sind. Kennt jemand eine Lösung, um dieses Problem zu beheben?

Ein Beispiel für mein Problem finden Sie unter ... www.nickriversdesign.com/dev

8
Nick

in Ihrem CSS können Sie Folgendes versuchen: body.logged-in{margin-top:20px;} oder, falls dies nicht funktioniert, einen anderen Code mit der Klasse .logged-in

8
Zach Lysobey

Versuchen Sie, dies zu Ihrer CSS-Datei hinzuzufügen:

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

die body.admin-bardeclaration auf der Vorderseite stellt sicher, dass diese Stile nur angewendet werden, wenn die Admin-Leiste sichtbar ist.

21
Brent

Versuchen Sie dies für WordPress 4+. Es prüft, ob die Admin-Leiste vorhanden ist und verschiebt in diesem Fall den festen Header etwas nach unten, um dies zu kompensieren.

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

Ich glaube, auf Geräten mit geringerer Breite ist wpadminbar nicht fest positioniert. Wenn Sie also das Dokument in einem Smartphone scrollen, folgt die Administratorleiste dem Bildlauf und bleibt nicht oben im Fenster. Wenn Sie dies berücksichtigen, fügen Sie einfach nach dem Aufruf von wp_head() Javascript in die Fußzeile Ihres Themas ein. Auf diese Weise können wir die Gerätebreite bestimmen und festlegen, ob das Dokument über die Admin-Leiste verfügt. Machen Sie dann einfach einige CSS-Regeln und hängen Sie sie an den Dokumentenkopf an - wie unten!

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

Angenommen, Ihr Navi hat eine Klasse 'main-navigation' und beim Scrollen fügen Sie eine weitere Klasse mit dem Namen 'fixed' hinzu. Ändern Sie das CSS so, dass es auf Ihr Navigationsfeld zielt, indem Sie 'body.admin-bar .main-navigation.fixed' durch den Code ersetzen, auf den Sie Ihr CSS ausrichten möchten.

Es kann zum Beispiel noch verbessert werden, ob die Admin-Leiste repariert ist oder nicht, aber ich hoffe, es hilft vorerst.

1
Ezzat Ali