Как убрать все элементы кроме двух?

Question

[hzhzhz124]

Здравствуйте!
Мне надо сделать простенькую адаптивную версию для сайта, точнее что бы для мобильных устройств не отображались отдельные элементы.

Мне нужно что бы экранов меньше 992px отключались некоторые ссылки из шапки сайта, а именно "О Marshall", "Информация", "Контакты". Корзину и поиск нужно оставить.

Я смог отключить вообще все элементы через:
media (max-width: 992px) {
.nav.navbar-nav.navbar-right {
display: none;
}
}

Не могу понять как добавить исключения для Корзины и Поиска (что бы они как раз таки отображались). Пробовал через оператор not, но там id и у меня ничего не получилось.

Comments

[Ankhena]

li:not(#id2):not(#id4) {
  background: #f00;
}

Answer 1

[Вадим]

3 варианта.
1)Сделать утилитарный класс, скажем .no-mobile
Добавить его всем элементам, которые должны скрываться на мобильном.
И создать соответствующее правило в css media.

media (max-width: 992px) {
  .no-mobile {
    display: none;
  }
}

2) Или скрывать в медиазапросе только те элементы, что нужно, по их уникальному классу или id.

3)Или с помощью псевдоселектора :not

media (max-width: 992px) {
  .nav.navbar-nav.navbar-right li:not(#cart):not(#search) {
    display: none;
  }
}

Вы же скрыли весь navbar-right, но Вам это как оказывается не нужно. Зачем тогда Вы его целиком скрыли?

P.s. А ещё Вы нарушили правило использования ресурса из третьего раздела. Не пихать код в вопросе картинками.