When navigating from my home page to the product page, I am encountering an issue with my hamburger button. It appears as though it is clicked but does not open up the menu. However, if I refresh the page, the button works again. Strangely, after refreshing and clicking back to the home page, the hamburger button stops working once more. I have imported jQuery using 'import $ from 'jquery'', so I am unsure of what could be causing this issue. Below are the relevant files.
Javascript function for clicking:
import $ from 'jquery'
import jquery from 'jquery'
$(document).ready(function () {
// Toggle nav menu and pause carousel when hamburger button is clicked
$('.navbar-toggler, navbar-collapse').on('click', function () {
$('.mobilemenu, navbar-collapse').toggleClass('open')
})
// Show the hamburger button when navbar is closed
$('#hiddenToggler').on('click', function () {
$('#hamburgerButton').show()
})
// Hide the hamburger button when navbar is open
$('#hamburgerButton').on('click', function () {
$('#hamburgerButton').hide()
})
})
Example of linking to a product page
<Link to="/ProductPage/">
<div className="card" key={product.id}>
<div className="card-img-wrap">
<img
className=" card-img-top"
src={product.img}
alt="Card image cap"
/>
</div>
<div className="card-body">
<h6 className="card-title text-center">{product.name}</h6>
<p className="card-text text-center">
<small className="text-muted red">${product.price}</small>
</p>
</div>
</div>
</Link>
CSS for navbar animation
.mobilemenu {
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 70%;
margin: auto;
background-color: white;
transform: translateX(-100%);
transition: all ease 0.25s;
&.open {
transform: translateX(0%);
}