Admin-Leiste und behobenes Header-Problem?

Ich habe meinen Header so gestaltet, dass er eine feste Spitzenposition hat. Während ich bei WordPress angemeldet bin, deckt die wp admin nav-Leiste den oberen Bereich meines Headers ab, sodass ich nicht auf meine obere Navigation zugreifen kann. Ich möchte, dass das wp admin nav meine obere Navigation nach 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

In Ihrem CSS könnten Sie etwas versuchen wie: body.logged-in{margin-top:20px;}oder wenn dies nicht funktioniert, einen anderen Code mit der .logged-inKlasse

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

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

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

Ich glaube, auf Geräten mit kleineren Breiten ist die wpadminbar nicht fest positioniert. Wenn Sie also das Dokument auf einem Smartphone scrollen, folgt die Admin-Leiste dem Bildlauf und bleibt nicht oben im Fenster. Wenn Sie dies berücksichtigen, fügen Sie gleich nach dem wp_head()Aufruf etwas Javascript in die Fußzeile Ihres Themas ein . Auf diese Weise können wir die Gerätebreite festlegen und feststellen, ob das Dokument über die Admin-Leiste verfügt. Dann machen Sie einfach einige CSS-Regeln und hängen 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 hinzu 'fixed'. Ändern Sie das CSS so, dass es auf Ihr Navigationsfeld 'body.admin-bar .main-navigation.fixed'abzielt, indem Sie es durch das ersetzen, auf das Sie Ihr Navigationsfeld ausrichten möchten.

Es kann weiter verbessert werden, zum Beispiel um zu überprüfen, ob die Admin-Leiste repariert ist oder nicht, aber im Moment hoffe ich, dass es hilft.

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

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

Das funktioniert auch

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

Ich habe gerade dieses CSS verwendet.

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

Versuchen Sie dies, es funktioniert gut

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

Geben Sie die obere Navigationsleiste

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