it-swarm.xyz

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

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

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

У меня есть переход navbar к черному. Проблема в том, что когда веб-сайт просматривается после выхода из системы, над панелью навигации остается пустое место, где раньше находилась панель администратора. Это был не тот случай, когда он был 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;
    }

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

2

Обновите свой класс .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
Andrew