wake-up-neo.net

Wie ist die Position der Navigationsleiste für Twenty Seventeen?

Ich mache ein Thema für 27 Kinder, und ich habe die Navigationsleiste oben platziert und korrigiert. Ursprünglich hatte ich Probleme, absolute beizubehalten und dann zu fixed zu werden, weil ein site-navigation-fixed hinzugefügt wurde, nachdem ich den Ort passiert hatte, an dem sich die Navigationsleiste ursprünglich befand.

Um dies zu beheben - hauptsächlich weil ich feststellen konnte, wo site-navigation-fixed definiert wurde -, habe ich einfach die meisten Regeln in die Klasse .navigation-top kopiert und eingefügt. dies ließ diesen seltsamen "Sprung" im Grunde nicht existent erscheinen.

Ich habe den navbar Übergang zu schwarz. Das Problem ist, dass beim Anzeigen der Website nach dem Abmelden ein leerer Bereich über der Navigationsleiste vorhanden ist, in dem sich die Administratorleiste befand. Dies war nicht der Fall, als es absolute war und seinen seltsamen Sprung hatte.

Das CSS, das ich benutze:

@media (min-width: 1200px) {
    .navigation-top {
        background-color: transparent;
        border: none;
        width: 100%;
        height: 120px;
        top: 32px;
        font-size: 130%;
        bottom: auto;
        position: fixed;
        left: 0;
        right: 0;
        z-index: 7;
    }
    .navigation-top .wrap {
        max-width: 100%;
    }

    .navbar-transition {
        background-color: black !important;
        transition: background-color 1s ease-in-out;
        -moz-transition: background-color 1s ease-in-out;
        -webkit-transition: background-color 1s ease-in-out;
        -o-transition: background-color 1s ease-in-out;
    }

Wie würde ich die Position der Navigationsleiste - des Themas Twenty Seventeen - richtig ändern, damit sie über dem Header-Bild angezeigt und korrigiert werden kann?

Aktualisieren Sie Ihre .navigation-top-Klasse, um top: 0; zu verwenden, damit anonyme Benutzer keine Lücke haben.

.navigation-top {
    background-color: transparent;
    border: none;
    width: 100%;
    height: 120px;
    top: 0;
    font-size: 130%;
    bottom: auto;
    position: fixed;
    left: 0;
    right: 0;
    z-index: 7;
}

Fügen Sie dann einen zusätzlichen Stil für authentifizierte Benutzer hinzu, der die Administrationsleiste berücksichtigt.

.admin-bar .navigation-top{
  top: 32px;
}

WordPress Core fügt der Klasse admin-bar das Body-Tag hinzu, wenn die Administrationsleiste angezeigt wird, sodass Sie diese Klasse nicht selbst hinzufügen müssen.

2
Andrew