CODEWITHSUNDEEP
htmltwitter-bootstrapgithubbootstrap-4jekyll
yndajas
yndajas

Reputation: 69

How to implement collapsible menus on Jekyll site

I'm using Jekyll for a static site hosted on GitHub (yndajas.co) and I'm trying to make the menu collapsible on small screens/windows.

I've tried many different methods including fairly vanilla Bootstrap code, but every time the menu won't stay open. Currently there are two different collapsible menus and a third that doesn't collapse on the live site. On small screens, the animation as you click/press either of the menu buttons seems to be slightly different on alternate clicks/presses (expanding vs collapsing, before disappearing), which makes me think the menu is toggling between open/closed state, but it's not ending up displaying as open in either state. Any idea why it won't work? I wondered if it just wasn't possible on static/Jekyll sites, but I've seen working examples!

The files are all in this repository: https://github.com/yndajas/yndajas.co

Upvotes: 0

Views: 924

Answers (1)

DC.Azndj
DC.Azndj

Reputation: 1396

I built your site locally and it looks like the issue is with Bootstrap. You are using version 3.3.7 while the docs are using 4.3.1. If you use the current version Bootstrap, then the middle navbar will work. You can remove the first and third navbars as well.

// 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>

...

Upvotes: 1

Related Questions