Как изменить расположение панели навигации темы Двадцать семнадцать?


Я создаю дочернюю тему Двадцать семнадцать, и я поместил панель навигации сверху и исправил. Первоначально у меня были проблемы с тем, чтобы он оставался absolute, а затем становился fixed, потому что он добавлял site-navigation-fixed после прохождения местоположения, в котором изначально находилась панель навигации.

Чтобы решить эту проблему - в основном из-за того, что я смог найти, где был определен site-navigation-fixed, - я просто скопировал и вставил большинство правил в класс .navigation-top. это в основном делало это странным "прыжок" кажется несуществующим.

У меня есть переход навигационной панели в черный цвет. Проблема в том, что когда веб-сайт просматривается при выходе из системы, над навигационной панелью, где раньше была панель администратора, остается пустое пространство. Это было не так, когда он был absolute и совершил свой странный прыжок.

css, который я использую:

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

Как бы я правильно изменил расположение панели навигации - темы Двадцать семнадцать - чтобы она была поверх изображения заголовка и была исправлена?

1 answers

Обновите свой класс .navigation-top, чтобы использовать top: 0;, чтобы не было пробелов для анонимных пользователей.

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

Затем включите дополнительный стиль для аутентифицированных пользователей, который учитывает панель администратора.

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

Ядро WordPress добавляет класс admin-bar в тег body, когда видна панель администратора, поэтому вам не нужно добавлять этот класс самостоятельно.

 2
Author: Andrew, 2018-01-08 13:14:59