Нижнее меню не работает в моем проекте WordPress с использованием заданной CSS - PullRequest
Новая
       5

Нижнее меню не работает в моем проекте WordPress с использованием заданной CSS

0 голосов
/ 15 апреля 2020

Мне было интересно, может ли кто-нибудь помочь мне с проблемой, на которой я застрял в данный момент. Я работаю над проектом WordPress через Udemy и следую инструкциям, но мои результаты не работают правильно.

Нижнее меню не должно отображаться в мобильном представлении, но, как вы можете видеть на моем скриншоте, оно все еще показывает : снимок экрана

вот мой CSS код для меню нижнего колонтитула:

/ нижний колонтитул / 

.site-footer{
    border-top: 2px solid var(--lightGray);
    padding:2rem 0;

}
.footer-content{
    display: flex;
    justify-content: space-between;
}

.footer-menu{
    display: none;
}
@media (min-width: 768px){
    .footer-menu .menu{
        display: flex;
    }

    .footer-menu .menu li{
        margin-right: 2rem;
    }
    .footer-menu .menu li:last-of-type{
        margin-right: 0;
    }


     .footer-menu a{
        font-family: var(--mainFont);
        font-size: 1.8rem;
        color: var(--black);
    }
}

** обновление ** Похоже, что пока мне повезло - я хотел бы, чтобы кто-нибудь проверил со мной код, чтобы выяснить, в чем проблема. Я положил его на github, если кто-то хотел бы помочь. Большое спасибо

Ответы [ 2 ]

0 голосов
/ 15 апреля 2020

Если вы хотите скрыть меню «Нижний колонтитул» в мобильном устройстве, вам необходимо display: none этот раздел меню в медиа-запросе размером 768 пикселей. 

@media(max-width:768px){
    .footer-menu{display: none;}
}

Итак, сначала меню будет отображаться на рабочем столе, который вам не нужен сначала добавить display: none. Вы можете добавить это в запросе @media.

Удалите ниже CSS с рабочего стола: 

.footer-menu{
    display: none;
}

и добавьте его в медиазапрос, о котором я упоминал выше. 

@media(max-width:768px){
     .footer-menu .menu{
        display: none;
    }
}
0 голосов
/ 15 апреля 2020

Не видя нашего html Я не могу точно сказать, в чем проблема. Мой совет:

  1. Убедитесь, что к вашему html применены правильные классы.

  2. Если это не так, убедитесь, что вы загружаете самый последний css файл * и что он не загружает более старую версию из кэша **.

* Во время разработки вы можете заставить WordPress загружать самый последний файл css, добавив измененное время в качестве параметра версии в ваши функции. Файл php при инициализации css: 

$modified = filemtime( get_template_directory() . '/style.css');
wp_enqueue_style( 'SLUG-style', get_stylesheet_uri(), array(), $modified );

** В chrome вы можете использовать инструменты разработчика для очистки кэша (Ctrl + Shift + I), щелкните правой кнопкой мыши на refre sh, затем нажмите «Очистить кэш и выполнить полную перезагрузку». .

...