I'm having trouble getting the navbar to collapse on my landing page created using react and bootstrap. Here is the code for my header component:
import React from 'react';
import logo from '../images/logonoBG.png';
export default function Header() {
return (
<header className="header">
<nav className="navbar navbar-expand-lg navbar-light bg-light">
<div className="container-fluid">
<img className="navbar-brand logo" src={logo} alt="#" />
<button
className="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarSupportedContent">
<ul className="navbar-nav me-auto mb-2 mb-lg-0">
<li className="nav-item">
<a className="nav-link active" aria-current="page" href="#gallery">Gallery</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
)
}