При нажатии на меню должна меняться иконка, но этого не происходит, что здесь не так?
$('.menu-icon').click(function() {
$('.men').slideToggle(500);
if ($('.menu-icon').html() == '<i class="fas fa-bars"></i>') {
$(this).html('<i class="fas fa-times"></i>')
} else {
$(this).html('<i class="fas fa-bars"></i>')
}
})
.logo-bar {
display: flex;
justify-content: space-between;
align-items: center;
}
.menu-icon {
display: block;
color: white;
}
@media screen and (max-width: 480px) {
.men {
display: none;
}
}
<div class="col-xl-3 logo-bar">
<img src="assets/img/logo.png" class="logo">
<button class="menu-icon"><i class="fas fa-bars"></i></button>
</div>
<div class="col-xl-5 ml-auto align-self-center men">
<nav>
<ul class="menu d-flex justify-content-end">
<li class="menu__item"><a href="#home" data-target="anchor">Home</a></li>
<li class="menu__item"><a href="#about" data-target="anchor">About</a></li>
<li class="menu__item"><a href="#news" data-target="anchor">News</a></li>
<li class="menu__item"><a href="#testimonials" data-target="anchor">Testimonials</a></li>
<li class="menu__item"><a href="#contact" data-target="anchor">Contact us</a></li>
</ul>
</nav>
</div>