Позиция: фиксируется на панели навигации, но мой нижний колонтитул складывается поверх нее, когда я нажимаю кнопку открытой навигации - PullRequest
0 голосов
/ 19 июня 2020

Я создал кнопки закрытия и открытия для навигации. У меня есть фиксированная позиция на моем свойстве навигации. Когда я нажимаю кнопку открытия, навигация открывается и покрывает всю мою страницу, как и предполагалось, ЗА ИСКЛЮЧЕНИЕМ нижнего колонтитула? Мой нижний колонтитул все еще виден поверх навигационной панели. Я не могу понять, что могло быть причиной этого. Я включил код для навигации и нижнего колонтитула. Ваши предложения очень важны!

    /* navigation */ 
    
    .header {
        position: absolute;
    }
    
    .header-content {
        display: flex;
        grid-column: 2 / -2;
        margin: 0;
    }
    
    .nav {
        position: fixed;
        background: #001E39;
        width: 100%;
        top:0;
        right:0;
        bottom:0;
        left:100%;
        transform: translateX(0);
    }
    
    .nav-list {
        list-style: none;
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-direction: column;
        height: 100%;
    }
    
    .nav-link { 
        text-decoration: none;
        color: #fff;
        text-transform: uppercase;
    }
    
    /* --- nav-buttons --- */
    
    .navigation-open {
        transform: translateX(-100%);
    }
    
    .close-nav {
        border: 0;
        background: 0;
        color: #fff;
        font-weight: 600;
        font-size: 2rem;
        cursor: pointer;
        padding: .5em;
        position: absolute;
    }
    
    .open-nav {
        border: 0;
        font-size: 2rem;
        background: 0;
        color: #fff;
        cursor: pointer;
        padding: .5em;
        margin-left: auto;
        position: absolute;
        left: 420px;
        top: 8px;
    }
    /*================= */
    /*     FOOTER       */
    /*==================*/

    .footer {
        background: #0B2458;
        opacity: .8;
        color: #fff;
        padding: .5em;
    }

    .footer-text {
        grid-column: 2;
    }

1 Ответ

0 голосов
/ 19 июня 2020

нижний колонтитул не опубликован, моя беда. это код. спасибо.

/*================= */
/*     FOOTER       */
/*==================*/

.footer {
    background: #0B2458;
    opacity: .8;
    color: #fff;
    padding: .5em;
}

.footer-text {
    grid-column: 2;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...