I have added Bootstrap to my staging site, built using Gatsby.

Something is going wrong with my Bootstrap responsive menu. The code seems to be fine:

  return (
    <nav className="navbar navbar-nav navbar-expand-xl navbar-light bg-light fixed-top">
       <div className="container" id="nav">
         <Link className="navbar-brand" to="/"><StaticImage src="../img/logo-min.png" alt="WaJK Logo" height={75}/>
             <span className="we">We </span><span className="are">are </span><span className="just">Just </span><span className="kids">Kids</span>
         </Link>
         <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
           <span className="navbar-toggler-icon"></span>
         </button>
         <div className="collapse navbar-collapse" id="navbarResponsive">
           <ul className="navbar-nav ml-auto">
           {
           data.allMdx.nodes.map((node, i) => (
            <li className="nav-item" key={node.frontmatter.url}>
              <Link className="nav-link" to={"../" + node.frontmatter.url}>{node.frontmatter.menu_name}</Link>
            </li>
          ))
          }
          </ul>
         </div>
       </div>
     </nav>
  )

And the scripts are loading okay:

The button correctly appears, and the navbarResponsive disappears, on a small screen. But when I click on my button, the navbarResponsive does not appear - nothing happens when the button is clicked.

How do I debug this to find out what is going wrong? I'm not getting much useful information from Firefox developer tools.