Добрый день.
Подскажите, как правильней всего сделать так, чтобы в верхней части магазина в адаптивной версии на маленьких экранах смартфонов (например, iPhone 5) выводилось хоть какое-нибудь меню?
В обычной (десктопной) версии у меня есть верхнее (оно же дублируется внизу) меню, также меню быстрых ссылок.
Но в мобильной версии они пропадают на маленьких экранах (iPhone 5), начинают появляться только на планшетах. Нужно, чтобы и на маленьком смартфоне можно было увидеть меню с информацией о контактах, ещё какая-нибудь важная информация о магазине.
Сейчас приходится скролить в самый низ страницы, чтобы это увидеть. Это дико не удобно.
К тому же, все нижние меню по умолчанию скрыты. Как их сделать по умолчанию раскрытыми?
Сайт: https://bb-engineering.ru/
Чтобы в шапке магазина на мобильных устройствах выводился блок “Верхнее меню” у темы UniTheme, нужно задать стили для CSS-класса меню через Пользовательские стили. Для этого перейдите в Панель администратора — Дизайн — Темы — Редактор тем. Затем выберите Редактировать — Пользовательские CSS. Вставьте следующий код в поле и нажмите сохранить. Назовите стиль и нажмите OK. Если изменения не появились, то очистите кэш магазина.
@media screen and (max-width: 978px) {
.top-links-menu-grid {
display: block !important;
}
}
Но в мобильной версии они пропадают на маленьких экранах (iPhone 5), начинают появляться только на планшетах.
Только не стоит сильно перегружать шапку магазина на мобильных. В современных мобильных магазинах шапку стараются делать не больше трех строк. Иначе придется просмотр каждой страницы начинать со скролла.
К тому же, все нижние меню по умолчанию скрыты. Как их сделать по умолчанию раскрытыми?
Самый простой способ сделать разный подвал на десктопе и мобильных устройствах — это создать два меню. Одно показывать только на десктопе, другое — только на мобильном. Скрывать/показывать блоки можно добавляя к блоку специальные классы-утилиты. Для этого перейдите в Панели администратора в меню Дизайн — Макеты. Затем выберите нужный блок, нажмите Параметры блока — Пользовательский CSS-класс и добавьте один из необходимых классов:
visible-phone
visible-tablet
hidden-phone
hidden-tablet
hidden-desktop
visible-desktop
1 лайк
И да и нет. Тот же Гугл в отчетах пишет, что нельзя делать большую структуру DOM потому как на это затрачивается время отрисовки, вычисление и применение стилей. Лучшим вариантом использование разных макетов для разных устройств или использование одного элемента (например меню), но с собственными стилями для устройств.
Вы имеете в виду, что стоит купить какой-нибудь плагин, которые позволяет делать разные темы для разных типов устройств (из коробки то так нельзя)?
А это то, что предлагает товарищ сверху?
Да. Но нужно посмотреть в новых версиях вроде заявляли разные макеты для устройств. Я бегло читал информацию и не скажу что и как там сделано.
Так же нужно смотреть насколько целесообразно покупать такой модуль, зависит насколько разные должны быть макеты. Если для мобильной версии очень сильно нужно сократить отображение блоков (элементов) тогда есть смысл, а одно меню целесообразнее переработать (см. ниже).
Не совсем. Это один блок меню, но его структуру и стили (отображение) нужно проработать, чтобы удобно было пользоваться на разных устройствах.
Но нужно посмотреть в новых версиях вроде заявляли разные макеты для устройств.
Такого не будет, увы.
Просто в будущей версии вместо ручного вписывание в строку css-классов типа “hidden-phone”, можно будет нажать на иконку телефона/планшета/десктопа и нужный класс подставится в строку сам.
Разные темы/макеты для разных устройств, насколько я понял, в коробке не появятся.
1 лайк
