Is anyone able to assist me with resolving the issue I am facing similar to what was discussed in React bootstrap navbar collapse not working? The problem is that although everything seems to be functioning properly, the navbar does not collapse when clicking on any nav item in responsive mode.
import React from 'react'
import Logo from "../img/logo_large.png"
// Imports for Font Awesome in React
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faBars } from "@fortawesome/free-solid-svg-icons"
// Installing React-scroll
import { Link} from "react-scroll"
//Navbar Component
const Navbar = () => {
return (
//This section allows customization of the navigation bar (e.g., dark mode)
<nav className="navbar navbar-expand-lg navbar-light bg-dark fixed-top">
<div className="container">
{/*Logo variable created above*/}
<Link smooth={true} eventKey="2" to="home" className="navbar-brand" href="#"><img className="Logo" src={Logo} /> </Link>
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<FontAwesomeIcon icon={faBars} style={{ color: "#fff" }} />
</button>
<div className="collapse navbar-collapse" id="navbarSupportedContent" data-toggle="collapse" data-target=".navbar-collapse.show">
{/*ml-auto --> to align content to the right*/}
<ul className="navbar-nav ml-auto">
<li className="nav-item active">
<Link smooth={true} eventKey="2" to="about" offset={-70} className="nav-link" href="#">About Me<span className="sr-only">(current)</span></Link>
</li>
<li className="nav-item">
<Link smooth={true} eventKey="2" to="services" offset={-70} className="nav-link" href="#">Services</Link>
</li>
<li className="nav-item">
<Link smooth={true} eventKey="2" to="experiences" offset={-70} className="nav-link" href="#">Experiences</Link>
</li>
<li className="nav-item">
<Link smooth={true} eventKey="2" to="abilities" offset={-70} className="nav-link" href="#">Abilities</Link>
</li>
<li className="nav-item">
<Link smooth={true} eventKey="2" to="blog" offset={-70} className="nav-link" href="#">Blog</Link>
</li>
<li className="nav-item">
<Link smooth={true} eventKey="2" to="freetime" offset={-70} className="nav-link" href="#">Freetime</Link>
</li>
<li className="nav-item">
<Link smooth={true} eventKey="2" to="contact" offset={-70} className="nav-link" href="#">Contact</Link>
</li>
</ul>
</div>
</div>
</nav >
)
}
export default Navbar