Главное меню прекрасно работает на моем ноутбуке, но не на телефоне

Question

Я использую WordPress для создания сайта. Вчера днем ​​все было хорошо, затем заголовок nav просто вылетел из ниоткуда. Сначала он показывал неназначенные свойства фокуса, но исправил эту проблему с помощью: focus. Он отлично работает на ноутбуке, но не на мобильных устройствах. У него нет активных цветов на маленьких экранах, но у меня есть sh. Спасибо за помощь!

.site-header .tab a:focus{ 
    color: #FF6508 !important;
    outline:none !important;
}

.site-header .tab a:active{ 
    color: #FF6508 !important;
}

.site-header .tab a:hover{ 
    color: #FF6508 !important;
}

.site-header .tab a:visited{ 
    color: #fff !important;
}

.site-header .tab a:after{ 
    color: #FF6508 !important;
}

@media screen and (max-width: 800px){
.site-header .tab a:link{ 
    color: #fff !important;
}

.site-header .tab a:active{ 
    color: #FF6508 !important;
}
}

Answer 1

Цвет, который требуется для псевдокласса: active, перезаписывается

@media screen and (max-width: 800px)
.site-header .tab a:link {
    color: #fff;
}
.site-header .tab a:link {
    color: #fff!important;
}

Кажется, вы используете JS для добавления класса фокуса к каждому элементу. Вы можете использовать этот же JS, чтобы добавить в стиль css к вашим элементам. Это перезапишет все, что написано в другом месте. Также кажется, что вам нужно удалить .focus из всех других навигационных систем, нажав на самую последнюю навигационную систему.

Если вы не хотите JS, то, чтобы избежать перезаписи CSS, возможно, рассмотреть иерархию и специфику вашего кода. Следующий код будет ниже в вашем пользовательском файле CSS с большей спецификой. Может быть так:

.site-header .primary-menu .tab a:active{ 
    color: #FF6508 !important;
}