Как реализовать разборные меню на сайте Jekyll

Question

Я использую Jekyll для статического сайта, размещенного на GitHub ( yndajas.co ), и пытаюсь сделать меню разборным на маленьких экранах / окнах.

I 'Мы пробовали много разных методов, включая довольно ванильный код Bootstrap, но каждый раз меню не оставалось открытым.В настоящее время существует два разных складных меню и третье, которое не разрушается на живом сайте.На маленьких экранах анимация, когда вы нажимаете / нажимаете любую из кнопок меню, кажется, немного отличается при альтернативных щелчках / нажатиях (расширение или свертывание, прежде чем исчезнуть), что заставляет меня думать, что меню переключается между открытым / закрытым состоянием, ноон не заканчивается отображением открытого в любом состоянии.Есть идеи, почему это не сработает?Я задавался вопросом, было ли это просто невозможно на статических сайтах / сайтах Jekyll, но я видел рабочие примеры!

Все файлы находятся в этом хранилище: https://github.com/yndajas/yndajas.co

Answer 1

Я создал ваш сайт локально, и похоже, что проблема в Bootstrap.Вы используете версию 3.3.7, в то время как документы используют 4.3.1.Если вы используете текущую версию Bootstrap, то будет работать средняя навигационная панель.Вы также можете удалить первую и третью навигационные панели.

// bottom of /_layouts/default.html

...
<!-- JavaScript links placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

...