'Mobile bar closing transition isn't working on my code?

I'm new to coding, and I do not understand what is wrong with my code. The menu bar is for the media. I have it set to transition when a user clicks on it, and it works when they open it; however, when it closes, the transition doesn't work. I tried troubleshooting it; however, the transitions work if I move the line of code after the link list. I'm sure it's something silly, and I was hoping someone could take a look and provide some guidance.

The transition works for line 32, but I want it on line 25, however, only closes it without the transition, help please.

Menu Bar

HTML Code:

    <!-- Main start to the webpage. Nav Bar and Business Name-->
    <body>
      <section class="header">
        <nav>
          <a href="index.html"><img src="img/light_logo.png"</a>
          <div class="nav-links" id="navLinks">
            
           (LINE 25)  <!-- <i class="fa-solid fa-xmark" onclick="hideMenu()"></i> --> 
            <ul>
              <li><a href="#home">Home</a></li>
              <li><a href="#products">Products</a></li>
              <li><a href="#Blog">Blog</a></li>
              <li><a href="#Contact">Contact Us</a></li>
            </ul>
            (LINE 32) <i class="fa-solid fa-xmark" onclick="hideMenu()"></i>
          </div>
          <i class="fa-solid fa-bars" onclick="showMenu()"></i>
        </nav>

Javascript code:

      
    <!-- JavaScript for Toggle Menu -->
    <script>
      var navLinks = document.getElementById("navLinks");
    
      function showMenu(){
        navLinks.style.right = "0";
      }
      function hideMenu(){
        navLinks.style.right = "-200px";
      }
    </script>

My CSS Code:

    @media(max-width: 700px){
        .text-box h1{
            font-size: 20px;}
        .nav-links ul li{
            display: block;
        }
        .nav-links{
            position: absolute;
            background: #6e6d6e;
            height: 100vh;
            width: 200px;
            top: 0;
            right: -200px;
            text-align: left;
            z-index: 2;
            transition: 1s;
        }
        
        
        nav .fa-solid {
            display: block;
            color: #fff;
            margin: 10px;
            font-size: 22px;
            cursor: pointer;
            
            
        }
        .nav-links ul{
            padding: 30px;
        }    
    
    }
javascripthtmlcss


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions