MetisMenue плохо разваливается на мобильных устройствах. SB Admin 2

Question

Я использую тему "SB Admin 2" для проекта.

Интегрированное Metis Menu очень хорошо работает как на рабочем столе, так и на планшете. Но когда я захожу на страницу с моим телефоном, меню не скрывается полностью. Только когда я прокручиваю страницу.

Вы можете посетить https://blackrockdigital.github.io/startbootstrap-sb-admin-2/pages/index.html чтобы проверить его.

Если вы уменьшите размер браузера до уровня экрана мобильного устройства, меню не скроется.

Я попытался сделать это в нижней части моего файла index.html с $('#side-menu').metisMenu('collapse'); Но это не работает. Это также определено в файле sb-admin-2.js. Но это тоже работает.

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

Answer 1

Попробуйте понизить версию JQuery до 2.1.3: https://code.jquery.com/jquery-2.1.3.min.js

Есть проблемы с metismenu с более новыми версиями Jquery: https://github.com/onokumus/metismenu/issues/128

Answer 2

Вы можете сделать это с помощью скрытия только css

.navbar-top-links {
  display: none 
}

Или, если вы не хотите, чтобы скрыть это всегда только по нажатию кнопки. Создайте новую кнопку с этими атрибутами перед вашим текущим неупорядоченным списком (ul)

<button type="button" class="collapse-2" data-toggle="collapse" href="#collapse2" aria-expanded="true"> 

И заменить этот код

<ul class="nav navbar-top-links navbar-right">

С этим кодом

<ul class="nav navbar-top-links navbar-right navbar-expand-sm navbar-collapse panel-collapse collapse" id="collapse2">

Мне удалось заставить это работать так, только вы должны стилизовать кнопку и поместить ее в правильное положение.