Как использовать различные меню для мобильных устройств - Shopify (меню)

Question

Я начал работать в магазине Shopify. Предыдущий разработчик использовал mmenu для создания мобильного меню.

Я хочу использовать разные меню для мобильных и настольных систем, вопрос в том, как я могу контролировать, какое меню отображается в mmenu?

Спасибо

Answer 1

Во-первых, вам нужно убедиться, что вы клонируете меню (поскольку плагин вносит множество изменений в html) со следующей опцией:

$("#my-menu").mmenu({
   // options
}, {
   // configuration
   clone: true
});

Затем вам нужно добавить CSS на основе идентификатора (prepend mm-), чтобы отобразить оригинал или клон.

@media (max-width: 600px) {
   #my-menu {
      display: none !important;
   }
}
@media (min-width: 601px) {
   #mm-my-menu{
      display: none !important;
   }
}

Вот фактическая документация для этого