As I design a navigation bar for a website, everything seems to be functioning smoothly, including the hamburger menu when resizing the screen. However, the issue arises when trying to click the hamburger menu while scrolling down the page.
By setting the initial state from 'false' to 'true,' it creates a reverse effect where the hamburger menu works only when scrolling but not when at the top of the page.
I have spent all day trying to troubleshoot this problem and find a solution without success. Any assistance in resolving this matter would be greatly appreciated.
Code for Navbar:
function Navbar2() {
const [scrolled, setScrolled] = useState(false);
const canvasRef = useRef();
const navLinksRef = useRef();
const liRefAbout = useRef();
const liRefServices = useRef();
const liRefGallery = useRef();
const liRefTestimonials = useRef();
const liRefContact = useRef();
// toggle mobile menu on icon click
useEffect(() => {
const burger = canvasRef.current;
...
.......CSS for Navbar:
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
min-height: 8vh;
background: transparent;
transition: all 0.4s linear;
position: sticky;
position: -webkit-sticky;
top: 0;
z-index: 900;
}
.scrolled {
position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(6px);
width: 100%;
}