CSS дисплей: нет; не работает в Firefox. Как я могу это исправить?

Question

У меня есть веб-сайт, который был создан кем-то другим, и мне было поручено взять на себя ответственность. На этом сайте было меню в стиле сэндвич и панель поиска в навигации.

С тех пор я создал мега-меню (плагин WordPress). Теперь старые значки являются избыточными и бесполезными, поэтому я применил правило display: none; к CSS, чтобы удалить их из внешнего интерфейса.

Это правильно работает в Safari и Chrome на Mac, однако кажется, что пользователи Windows в Firefox и Chrome, а также пользователи Firefox в Mac все еще могут видеть значки.

Кто-нибудь может помочь? Веб-сайт www.quanser.com . Вы увидите значки в заголовке справа.

header.site-header .badge-links {
    display: none !important;
}

Answer 1

Существует довольно эффективный способ решения этой проблемы:

header.site-header .badge-links {
    z-index:-100;
}

@media screen and (max-width: 992px) {
header.site-header .badge-links {
    z-index:100;
}
@
}

Answer 2

Я использую Firefox в Windows и до сих пор вижу значок меню «Поиск и гамбургер» (впервые посещая ваш сайт), это означает, что это не имеет никакого отношения к кешу. Хотя обычно вы работаете с Wordpress, вы должны очистить кеш после изменения CSS.

Пока что я проверил CSS и вижу, что этот блок CSS повторяется 3 раза, как будет выглядеть последний блок:

.header.site-header .badge-links {
   position: absolute;
   top: -3px;
   right: -.625rem;
}

Попробуйте найти этот блок в вашем CSS и добавьте что-то вроде этого:

.header.site-header .badge-links {
   position: absolute;
   top: -3px;
   right: -.625rem;
   display: none; 
}

You don't need to `!important` in your CSS in this case.