web-dev-qa-db-fra.com

Comment changer l'emplacement de la barre de navigation du thème Twenty Seventeen?

Je fais un thème de vingt-dix-sept enfants et je fixe et fixe la barre de navigation. À l’origine, j’avais de la difficulté à rester absolute puis à devenir fixed parce qu’il ajoutait un site-navigation-fixed après avoir dépassé l’emplacement où la barre de navigation était située à l’origine.

Pour résoudre ce problème - principalement parce que je pouvais trouver où site-navigation-fixed était défini -, je viens de copier et coller la plupart des règles dans la classe .navigation-top. cela a fait que ce "saut" étrange semblait inexistant.

J'ai la transition de la barre de navigation vers le noir. Le problème est que lorsque le site Web est visualisé lorsqu'il est déconnecté, il y a un espace vide au-dessus de la barre de navigation où se trouvait la barre d'administration. Ce n'était pas le cas quand c'était absolute et avait son saut étrange.

Le css que j'utilise:

@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;
    }

Comment pourrais-je changer correctement l'emplacement de la barre de navigation - du thème Twenty Seventeen - afin qu'il puisse être placé en haut de l'image d'en-tête et corrigé?

menuscsstheme-twenty-seventeen
2
Walid Mujahid وليد مجاهد

Mettez à jour votre classe .navigation-top afin qu'elle utilise top: 0; afin qu'il n'y ait pas d'espace pour les utilisateurs anonymes.

.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;
}

Ensuite, incluez un style supplémentaire pour les utilisateurs authentifiés, qui représente la barre d'administration.

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

Le noyau WordPress ajoute à la classe admin-bar la balise body lorsque la barre d'administration est visible, vous n'avez donc pas à ajouter cette classe vous-même.

2
Andrew