I'm making a website with Bulma (and I'm pretty new to Bulma & CSS frameworks) and have imported Bulma.js for my Navbar burger but it only works on the home (index.html) page.
I'm thinking that the reason for this is because on the other pages I load the navbar with
$("#nav").load("../extras/nav.html");
and import bulma.js normally in the header. I've tried importing it from the nav.html file and putting it in the body. I've also used window.onload in all sorts of ways. I can verify that the bulma.js is loaded as I downloaded and added a console.log and it works.
This loads the nav.html into the div.
<div id="nav"></div>
$(document).ready(function() {
console.log('loading navbar');
$("#nav").load("../extras/nav.html");
});
This is the full nav.html file
And obviously a line linking bulma.js in the head.
The goal is to get the nav burger to work without changing too much of the content (such as linking nav.html) but currently the nav burger does nothing when clicked (except on index.html page which is the same but with the nav.html code hard coded in)
Also, this is my first Stack overflow post (coming from Reddit) so I hope everything is proper and this problem can be resolved.
This is because you are adding the elements after the JS file has loaded, and after the DOM is "ready". So when the page loads that clickable element does not exist and thus there is nothing attached to that element.
I would suggest one of a few solutions.
Simply add your Nav HTML to each page.
Add the click behavior for the hamburger menu to your Nav HTML template. This is from the Bulma documentation.
<script>
$(".navbar-burger").click(function() {
// Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
$(".navbar-burger").toggleClass("is-active");
$(".navbar-menu").toggleClass("is-active");
});
</script>