Bootstrap: CSS медиазапросы не переопределяют оригинальный CSS

Question

Мне нужно иметь отдельные панели навигации в зависимости от того, просматривается ли сайт на мобильном телефоне или на рабочем столе.У меня есть две навигационные панели (я знаю, что было бы проще использовать JS, но это должно быть решение CSS).

<nav class="navbar navbar-default navbar-fixed-top pb-mobile-nav">
...

<nav class="navbar navbar-default navbar-fixed-top pb-main-nav">
...

Мой CSS выглядит следующим образом:

.pb-main-nav { 
    display:block;
}

.pb-mobile-nav  { 
    dispaly: none;
}

и когда мы приближаемся к размерам iPhone Plus

@media screen and (max-width: 414px) {

    .pb-main-nav { 
        display:none;
    }

    .pb-mobile-nav  { 
        dispaly: block;
    }
}

.pb-main-nav принимаетнового отображения нет, но .pb-mobile-nav не принимает отображение блока, оно остается нулевым.Я не понимаю, почему один работает, а другой нет (по правилам специфики), но у меня сейчас нет меню.Это не оптимально.:)

Есть идеи, как заставить этот CSS работать?

Answer 1

Даже если это не рекомендуется, с помощью !important вы можете указать, какие свойства следует применять.Кроме того, используя те же селекторы CSS (в данном случае класс), специфичность одинакова для каждого применяемого стиля.Однако убедитесь, что порядок селекторов CSS правильный, поскольку будет применен окончательный стиль.

Answer 2

Измените свой код на

display: block !important;

Answer 3

Ошибка в вашем коде:

.pb-mobile-nav  { 
        dispaly: block;
}

Изменить на:

display: block;