Ive been trying to fix my code for ages no matter how much i hover over the hamburger menu image the cursor just woudnt change:
<div class="header">
<nav>
<h1 class="nav1">CEA</h1>
<h1 class="line"></h1>
</nav>
<nav class="nav">
<div class="nav-left "> <!--active-->
<ul>
<li class="nav-link"> <a class="large" href="#">About</a></li>
<li class="nav-link"> <a class="large" href="#">Our Work</a></li>
<li class="nav-link"> <a class="large" href="#">Contact</a></li>
<li class="nav-link"> <a class="small" href="#">Web Design</a></li>
<li class="nav-link"> <a class="small" href="#">eCommerce</a></li>
<li class="nav-link"> <a class="small" href="#">Blog</a></li>
</ul>
<div class="contact">
<p class="large">Get in touch</p>
<p class="small">0302101290391</p>
<p class="small">[email protected]</p>
</div>
</div>
<div class="nav-right "> <!--active-->
</div>
<img src="Imagesmenu.png" alt="menu" class="menu" style="z-index: 10;">
</nav>
</div>
my css:
.header{
height: 110px;
}
.menu{
display: inline;
height: 80px;
position: fixed;
top: 8px;
right: 48px;
cursor: pointer;
display: flex;
flex-direction: column;
justify-content: space-around;
transition: 0.5;
}
idk if my js is affectign this code but heres my js:
const menuTog = document.querySelector(".menu");
const nav = document.querySelector(".nav");
const navLeft = document.querySelector(".nav-left");
const navRight = document.querySelector(".nav-right");
const navLinks = Array.from(document.querySelectorAll(".nav-links"));
const contact = document.querySelector('.contact');
const logo = document.querySelector('.logo');
menuTog.addEventListener('click', () => {
menuTog.classList.toggle('active');
nav.classList.toggle('active');
navLeft.classList.toggle('active');
navRight.classList.toggle('active');
logo.classList.toggle('active');
contact.classList.remove('active');
navRight.classList.remove('active');
if (menuTog.classList.contains('active')) {
setTimeout(() => {
navRight.classList.add('active');
}, 100)
}
});
I already addded pointer cursor in the div but it still woudnt work. I already added the .menu:hover but it still woudnt work idk whats wrong with my code if theres someone out there that could help me than please do thank you.