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

JohannesDavidian
June 25, 2024
117 views
0 votes
2 Answers

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

<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>

.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 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

Answers

Chosen as BEST ANSWER

I solved the problem in other way: this is html :

<script>
$(document).ready(function() {
 
var hamburger = $('.mobile-menu'),
    menu      = $('.menu'),
    sub_menu  = $('.sub-menu-wrapper'),
    menu_item = $('.has-sub-menu');

  hamburger.on('click', function() {
      menu.slideToggle();
      $(this).toggleClass('active');
  });

  menu_item.on('click', function() {
      $(this).children('.sub-menu-wrapper').slideToggle();
  });
  
}); 
    
</script>

ul li {
  list-style-type: none;
}

a {
  text-decoration: none;
}

a, span {
  display: inline-block;
}

header {
  position: relative;
}

.menu > ul {
  background-color: #ff5722;
  text-align: center;
  position: relative;
  font-size: 0;
}

.menu > ul > li {
  background-color: #ff5722;
  display: inline-block;
  padding: 10px 20px;
  cursor: pointer;
}

ul li a {
  color: #fff;
  font-size: 16px;
  display: block;
}

ul li:hover a {
  color: #333;
}

.has-sub-menu > a::after {
  content: '';
  border: 5px solid transparent;
  border-top-color: #fff;
  display: inline-block;
  vertical-align: middle;
  margin-left: 5px;
}

.has-sub-menu:hover > a::after {
  border-top-color: #333;
}

.sub-menu-wrapper {
  position: absolute;
  top: 65px;
  left: -9999px;
  background: #fff;
  display: flex;
  opacity: 0;
  transition: top .5s, opacity .5s;
}

.sub-menu {
  padding: 20px 30px;
  width: 25%;
  text-align: left;
}

.sub-menu-heading {
  border-bottom: 1px solid #ff5722;
  margin-bottom: 10px;
  cursor: initial;
}

.sub-menu a:hover {
  color: #ff5722;
}

.sub-menu-heading a:hover {
  color: initial;
}

.sub-menu-wrapper a {
  color: #ff5722;
}

.has-sub-menu:hover > .sub-menu-wrapper {
  opacity: 1;
  left: 0;
  right: 0;
  top: 45px;
}

.mobile-menu {
  display: flex;
  width: 30px;
  height: 25px;
  flex-direction: column;
  justify-content: space-around;   
  cursor: pointer;
  position: absolute;
  top: -2.5px;
    right:2%;
  display: none;
    
   
    
}

.bar {
  height: 3px;
  background-color:#ee6c4d;
  transition: all .3s;
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  -ms-transition: all .3s;
  -o-transition: all .3s;
}

.mobile-menu.active .bar:nth-child(1) {
  transform: translateY(6px) rotate(-45deg);
}

.mobile-menu.active .bar:nth-child(2) {
  transform: translateY(-6px) rotate(45deg);
}

@media (max-width: 600px)  {    
    * {
        box-sizing: border-box;
        margin:0;
        padding:0;
    }
    html, body {
        max-width: 100%;
        overflow-x: hidden; 
    } 
    .entry-title {    
        display:none;
    }
    entry-footer {                
        display:none;
    }

    .custom-container {
        display: flex;
        width: 100%;         
        height:100px;
        justify-content: space-between;
        align-items: center;
        box-sizing: border-box;
        padding: 0;
        margin: 0;
        position:fixed;
        margin-top:-100px;
        z-index: 1; /* Added z-index */
    }
    .section {
        flex: 1;
        display: flex;
        align-items: center;
        box-sizing: border-box;
    }
    .first-section {
        margin-left: 2%;
        justify-content: flex-start;
        position:fixed;
    }
    .second-section {
        margin-right: 2%;
        justify-content: flex-end;
    }
    .icon-container {
        display: flex;
        align-items: center;
        position: relative;
        z-index: 1; /* Ensure the icon is on top */
    }
    .circle {
        width: 30px;
        height: 30px;
        background-color:#ee6c4d;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .circle .fa-star {
        color:#ffd978;
        font-size: 16px;
    }
    .icon-container .icon-text {
        margin-left:2px;
        font-weight: 700;
        font-size:24px;
        color:#333;
        font-family: 'Merriweather', serif;
        z-index:1;
        position:relative;
    } 

    .mobile-menu {
        display: flex;
        z-index: 3; 
        position: relative;
            
    }

    .menu {
            top:0;
            right:0;
        padding-top:60px;
        display: none;
        background-color:grey;
        height:700px;
        width:250px;
        z-index: 2; 
        position: absolute; 
    }

    .has-sub-menu > a::after {
        content: '';
        border: 8px solid transparent;
        border-top-color:green;
        display: inline-block;
        vertical-align: middle;
        margin-top:-12px;
    }

    .menu > ul > li {
        display: block;
        text-align: left;
        position: relative;
        color:green;
        font-size: 18px;
        margin-bottom: 10px; 
    }
    
    .menu > ul > li > a {
        color: green;
        font-size: 18px; 
    }

    .sub-menu a:hover {
        color: #333;
    }
    
    .has-sub-menu > a {
        display: inline-block;
    }

    .has-sub-menu > a::after {
        position: absolute;
        right: 20px;
        top: 20px;
    }

    .sub-menu-wrapper {
        position: static;
        background: transparent;
        display: none;
        flex-wrap: wrap; 
    }

    .has-sub-menu:hover > .sub-menu-wrapper {
        display: flex; 
    }

    .sub-menu {
        width: 48%; 
        padding: 10px 5px;
        box-sizing: border-box;
        margin-bottom: 15px; 
    }

    .sub-menu-heading {
        border-color: #fff;
        font-size: 18px; 
    }

    .sub-menu-wrapper a {
        color:green;
        font-size: 16px; 
    }

    .header-container {
        display: flex;
        width:100%;
        height:150px;
        flex-direction:row;
        background-color:#ee6c4d;
        margin-top:100px;

    }
    .header-section1 {
        display:flex;
        justify-content:flex-start;
        flex-direction:column;
    }
    .header-section2 {
        display:flex;
        justify-content:flex-end;
    }
    h1 {
        padding-top:-20px;
        padding-left:20px;
        margin-bottom:0;
        font-size:21px;
    }
    ul {
        padding-left:20px;
        margin: 0;
        list-style-type: none;
    }
    .icon {
        display: flex;
        align-items: center;
        margin: 5px 0;
    }
    .icon i {
        color:green;
        margin-right: 10px;
    }
    .icon-text {
        font-size: 16px;
    }

    .header-section2 img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    } 
    
    .card-container {
        z-index:1;
        position: relative;
    }
}

 <nav class="menu">
          
      
 
          
    <ul>
      <li><a href="#">HOME</a></li>
      <li class="has-sub-menu"><a href="#">Laptop Brands</a>
        <div class="sub-menu-wrapper">
          <ul class="sub-menu">
            <li class="sub-menu-heading"><a>Asus</a></li>
            <li><a href="#">asus1</a></li>
            <li><a href="#">Asus2</a></li>
            
          </ul>
          <ul class="sub-menu">
            <li class="sub-menu-heading"><a>Acer</a></li>
            <li><a href="#">Acer1</a></li>
            <li><a href="#">Acer2</a></li>            
          </ul>
          <ul class="sub-menu">
            <li class="sub-menu-heading"><a>Dell</a></li>
            <li><a href="#">Dell1</a></li>
            <li><a href="#">Dell2</a></li>
                     </ul>
          <ul class="sub-menu">
            <li class="sub-menu-heading"><a>HP</a></li>
            <li><a href="#">HP1</a></li>
            <li><a href="#">HP2</a></li>
            
          </ul>
        </div>
      </li>
        <li class="has-sub-menu"><a href="#">MacBooks</a>
        <div class="sub-menu-wrapper">
          <ul class="sub-menu">
            <li class="sub-menu-heading"><a>MacBooks pro</a></li>
            <li><a href="#">Pro1</a></li>
            <li><a href="#">Pro2</a></li>
            
          </ul>
          <ul class="sub-menu">
            <li class="sub-menu-heading"><a>MacBooks Air</a></li>
            <li><a href="#">Air1</a></li>
            <li><a href="#">Air2</a></li>
            
          </ul>
               </div>
      </li>
</ul>
  </nav>  
   
 <div class="mobile-menu">
            <span class="bar"></span>
            <span class="bar"></span>
           
        </div>

(Edit)

Check if the JavaScript is toggling the icons correctly add console logs to help with debugging:

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;
            console.log("Menu closed, showing bars icon");
        } else {
            menuItems.classList.add('active');
            hamburger.innerHTML = timesIcon;
            console.log("Menu opened, showing times icon");
        }
    });

    // 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)';
                console.log("Dropdown opened");
            } else {
                caretIcon.style.transform = 'rotate(0deg)';
                console.log("Dropdown closed");
            }
        }
    });
});

using this you can catch errors. If the expected log message doesn’t appear, you know the issue is in that part of the code.

Please signup or login to give your own answer.

Click here to cancel reply.

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

Answers