Есть два варианта решения. Вы можете создать две отдельные панели — для ПК и мобильных устройств, если вам нужен разный дизайн.
Для этого задайте настройки отображения:
- Показывать начиная с (px)
- Скрывать на экранах шире, чем (px)
Либо вы можете использовать одну панель и гибко настроить отображение её элементов на разных устройствах.
Перейдите у элемента в Расширенные настройки → Показывать на устройствах и выберите нужный вариант:
- Все устройства
- Только мобильные
- Только планшеты
- Только ПК
- Мобильные + планшеты
- Планшеты + ПК
Например, на этой странице мы создали панель из 8 элементов:
- Первые 4 элемента будут отображаться на всех устройствах
- 5 элемент — будет показываться только на планшетах и ПК
- 6 элемент — только на ПК
- 7 и 8 элемент — мы сделали через Дополнительный класс и дополнительные стили, он показывается при разрешении экрана больше 1400px.
Для проверки вы можете изменять размер браузера, чтобы увидеть, как пропадают или появляются элементы.
Пример нестандартных параметров
Последние, седьмой и восьмой элемент отображается только на экранах с шириной 1400 px и более. Для этого мы использовали дополнительные стили: элементу присвоен класс show-from-1400 , а в дополнительные стили прописали следующий код:
.wpbar .show-from-1400 {
display: none;
}
@media (min-width: 1400px) {
.wpbar .show-from-1400 {
display: flex;
}
}