OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

on mobile when I open hamburger menu the X icon is not showing when I want to close the menu?

  • Thread starter Thread starter Johannes Davidian
  • Start date Start date
J

Johannes Davidian

Guest
this is html,css,js code for navigation menu and hamburger menu:

Code:
<nav class="menu">
        <div class="hamburger">
             <i class="fas fa-bars"></i>
        
                </div>
        <ul class="menu-items">
            <li><a href="#">Home</a></li>
            <li class="dropdown">
                <a href="#">Laptop Brands <i class="fa fa-caret-down"></i></a>
                <div class="mega-menu">
                    <div class="menu-row">
                        <div class="menu-column">
                            <h3>Asus</h3>
                            <ul>
                                <li><a href="#">Asus1</a></li>
                                <li><a href="#">Asus2</a></li>
                            </ul>
                        </div>
                        <div class="menu-column">
                            <h3>Acer</h3>
                            <ul>
                                <li><a href="#">Acer1</a></li>
                                <li><a href="#">Acer2</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="menu-row">
                        <div class="menu-column">
                            <h3>HP</h3>
                            <ul>
                                <li><a href="#">HP1</a></li>
                                <li><a href="#">HP2</a></li>
                            </ul>
                        </div>
                        <div class="menu-column">
                            <h3>Dell</h3>
                            <ul>
                                <li><a href="#">Dell1</a></li>
                                <li><a href="#">Dell2</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </nav>

Code:
.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;
    }
}

Code:
document.addEventListener('DOMContentLoaded', () => {
    const hamburger = document.querySelector('.hamburger');
    const menuItems = document.querySelector('.menu-items');
    const dropdown = document.querySelector('.dropdown');
    const barsIcon = '<i class="fas fa-bars"></i>';
    const timesIcon = '<i class="fas fa-times"></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 <= 767) {
            event.preventDefault();
            dropdown.classList.toggle('active');
            const caretIcon = dropdown.querySelector('.fa-caret-down');
            if (dropdown.classList.contains('active')) {
                caretIcon.style.transform = 'rotate(180deg)';
            } else {
                caretIcon.style.transform = 'rotate(0deg)';
            }
        }
    });
});

the problem is when I open hamburger menu on iphone or mobile the X icon is not showing. I want to know if the problem is in html,css or in js. I see it has to do with fas fa-times. can someone correct me? thanks my url is :laptopdiscounthub.com

<p>this is html,css,js code for navigation menu and hamburger menu:</p>
<pre><code><nav class="menu">
<div class="hamburger">
<i class="fas fa-bars"></i>

</div>
<ul class="menu-items">
<li><a href="#">Home</a></li>
<li class="dropdown">
<a href="#">Laptop Brands <i class="fa fa-caret-down"></i></a>
<div class="mega-menu">
<div class="menu-row">
<div class="menu-column">
<h3>Asus</h3>
<ul>
<li><a href="#">Asus1</a></li>
<li><a href="#">Asus2</a></li>
</ul>
</div>
<div class="menu-column">
<h3>Acer</h3>
<ul>
<li><a href="#">Acer1</a></li>
<li><a href="#">Acer2</a></li>
</ul>
</div>
</div>
<div class="menu-row">
<div class="menu-column">
<h3>HP</h3>
<ul>
<li><a href="#">HP1</a></li>
<li><a href="#">HP2</a></li>
</ul>
</div>
<div class="menu-column">
<h3>Dell</h3>
<ul>
<li><a href="#">Dell1</a></li>
<li><a href="#">Dell2</a></li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</nav>
</code></pre>
<pre><code>.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;
}
}
</code></pre>
<pre><code>document.addEventListener('DOMContentLoaded', () => {
const hamburger = document.querySelector('.hamburger');
const menuItems = document.querySelector('.menu-items');
const dropdown = document.querySelector('.dropdown');
const barsIcon = '<i class="fas fa-bars"></i>';
const timesIcon = '<i class="fas fa-times"></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 <= 767) {
event.preventDefault();
dropdown.classList.toggle('active');
const caretIcon = dropdown.querySelector('.fa-caret-down');
if (dropdown.classList.contains('active')) {
caretIcon.style.transform = 'rotate(180deg)';
} else {
caretIcon.style.transform = 'rotate(0deg)';
}
}
});
});
</code></pre>
<p>the problem is when I open hamburger menu on iphone or mobile the X icon is not showing.
I want to know if the problem is in html,css or in js.
I see it has to do with fas fa-times.
can someone correct me?
thanks
my url is :laptopdiscounthub.com</p>
 

Latest posts

Top