На мобильном телефоне, когда я открываю меню-гамбургер, значок X не отображается, когда я хочу закрыть меню? ⇐ CSS

[Anonymous]

это код html,css,js для меню навигации и меню-гамбургера:

Код: Выделить всё

[i][/i]

[list]
[*][url=#]Home[/url]
[*]
[url=#]Laptop Brands [i][/i][/url]



Asus

[url=#]Asus1[/url]
[*][url=#]Asus2[/url]
[/list]

Acer
[list]
[*][url=#]Acer1[/url]
[*][url=#]Acer2[/url]
[/list]




HP
[list]
[*][url=#]HP1[/url]
[*][url=#]HP2[/url]
[/list]

Dell
[list]
[*][url=#]Dell1[/url]
[*][url=#]Dell2[/url]
[/list]

Код: Выделить всё

.menu {
background-color: grey;
position: relative;
}

.menu-items {
list-style-type: none;
padding: 0;
margin: 0;
display: flex;
}

.menu-items > li {
position: relative;
}

.menu-items > li > a {
display: block;
padding: 15px 20px;
color: white;
text-decoration: none;
}

.menu-items > li > a:hover,
.menu-items > li:hover >  a {
background-color: darkgrey;
}

.dropdown:hover .mega-menu {
display: flex;
}

.fa-caret-down {
margin-left: 5px;
}

.dropdown:hover .fa-caret-down {
transform: rotate(180deg);
}

.mega-menu {
display: none;
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
background-color: grey;
width: 600px;
padding: 20px;
box-shadow: 0 8px 16px rgba(0,0,0,0.2);
flex-wrap: wrap;
justify-content: center;
gap: 20px;
}

.menu-row {
display: flex;
width: 100%;
justify-content: space-around;
}

.menu-column {
flex: 1;
padding: 0 15px;
min-width: 150px;
text-align: center;
}

.menu-column h3 {
color: white;
border-bottom: 1px solid white;
padding-bottom: 5px;
margin-bottom: 10px;
}

.menu-column ul {
list-style-type: none;
padding: 0;
margin: 0;
}

.menu-column ul li a {
color: white;
text-decoration: none;
display: block;
padding: 5px 0;
transition: background-color 0.3s;
}

.menu-column ul li a:hover {
background-color: darkgrey;
border-radius: 4px;
}

/* Responsive Styles */
.hamburger {
display: none;
cursor: pointer;
padding: 15px 20px;
}

.hamburger i {
font-size: 24px;
color: #ffd978;
transition: 0.5s;
}

@media (max-width: 600px)  {

.menu-items {
display: none;
flex-direction: column;
position: fixed;
top: 0;
right: -100%;
height: 100%;
width: 300px;
background-color: grey;
transition: right 0.3s ease;
padding-top: 60px;
}

.menu-items.active {
right: 0;
display: flex;
}

.hamburger {
display: block;
}

/* Mobile Dropdown */
.dropdown .mega-menu {
display: none;
position: static;
transform: none;
width: 100%;
box-shadow: none;
background-color: transparent;
padding: 0;
}

.dropdown.active .mega-menu {
display: block;
}
}

Код: Выделить всё

document.addEventListener('DOMContentLoaded', () => {
const hamburger = document.querySelector('.hamburger');
const menuItems = document.querySelector('.menu-items');
const dropdown = document.querySelector('.dropdown');
const barsIcon = '[i][/i]';
const timesIcon = '[i][/i]';

// Initialize hamburger with bars icon
hamburger.innerHTML = barsIcon;

// Toggle hamburger menu
hamburger.addEventListener('click', () => {
if (menuItems.classList.contains('active')) {
menuItems.classList.remove('active');
hamburger.innerHTML = barsIcon;
} else {
menuItems.classList.add('active');
hamburger.innerHTML = timesIcon;
}
});

// Toggle dropdown on mobile
dropdown.addEventListener('click', (event) => {
if (window.innerWidth 

Подробнее здесь: [url]https://stackoverflow.com/questions/78658650/on-mobile-when-i-open-hamburger-menu-the-x-icon-is-not-showing-when-i-want-to-cl[/url]