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.