Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Bootstrap 4 - Drupal 8 vanilla JS menu
<header id="header" class="header" role="banner" aria-label="{{ 'Site header'|t}}">
<nav class="navbar navbar-expand-lg fixed-top" id="main-navbar">
<div class="navbar-brand d-lg-none d-xl-none">YOUR SITE NAME</div>
<button id="navbar-toggler-id" class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#CollapsingNavbar" aria-controls="CollapsingNavbar" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="CollapsingNavbar">
{{ page.primary_menu }}
</div>
</nav>
</header>
(function () {
// Replicate BS4 Menu open and close.
document.getElementById('navbar-toggler-id').onclick = function() {
document.getElementById('navbar-toggler-id').classList.toggle('collapsed');
document.getElementById('CollapsingNavbar').classList.toggle('show');
};
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.