Admin-Leiste und behobenes Header-Problem?

9

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

headers admin-bar

— Nick
quelle

8

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

— Zach Lysobey
quelle

6

Dies betrifft (fälschlicherweise) alle angemeldeten Benutzer. Betrachten Sie stattdessen die Antwort von Brent.

— Chris Burgess

22

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.

— Brent
quelle

1

body.admin-bar ist der richtige Selektor (und dies ist die richtige Antwort). Die Antwort von Zach L betrifft alle angemeldeten Benutzer, aber nur angemeldete Benutzer mit Berechtigungen zum Bearbeiten von Inhalten haben die Admin-Leiste sichtbar und müssen den Header auf der Seite nach unten verschieben.

— Chris Burgess

interessant ... Ich hatte noch nie persönlich ein Setup mit Benutzern ohne diese Berechtigungen. Ich stelle mir vor, es ist dasselbe, als ob in den Benutzereinstellungen die Admin-Leiste deaktiviert wird.

— Zach Lysobey

Versionshinweis: .admin-barerscheint nicht mehr in WordPress 4. Es wird jetzt aufgerufen #wpadminbarund umschließt den Inhalt nicht. Daher kann das oben Gesagte nicht auf Version 4+

— Raptor

Eine SASS-Version ist ebenfalls verfügbar, zusammen mit Erläuterungen zu Handys / Desktop-Auflösungen ( reaktionsfähige

— Minister

Wie funktioniert dies, wenn der Benutzer nach unten scrollt? Dann bleibt die wp-Navigationsleiste "fast am oberen Bildschirmrand"

— hängen,

1

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.

— Ezzat Ali
quelle

1

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

— ykay sagt Reinstate Monica
quelle

1

Bitte bearbeiten Sie Ihre Antwort und fügen Sie eine Erklärung hinzu: Warum könnte das das Problem lösen?

— Fuxia

Wenn ich '.site-header' in 'body' ändere, funktioniert das für mich.

— Kaji

1

Das funktioniert auch

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

— AnDongNing
quelle

Bitte versuchen Sie, eine Erklärung hinzuzufügen - dies ermöglicht es dem OP und zukünftigen Benutzern, zu lernen und zu verstehen, was passiert, anstatt nur ein Ort zu sein, an dem die Leute ihren Code für sie schreiben lassen. Danke für die Antwort.

— Tony Djukic

0

Ich habe gerade dieses CSS verwendet.

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

— JanetE
quelle

-1

Versuchen Sie dies, es funktioniert gut

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

— Andrii khmelovskyi
quelle

-2

Geben Sie die obere Navigationsleiste

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

— Deepak Kumar
quelle