Fixed The navbar toggle problem

Author: muhammad-awais-web-dev

index.html

@@ -46,19 +46,19 @@ <h1>Hi, I am a Web Developer and UX/Ui Designer</h1>
                     <a href="curriculum vitae.pdf" download ><span><i class="fa-solid fa-download"></i>  Download CV</span></a>
                 </div>
                 <div class="social-buttons-container">
-                    <a href="https://www.linkedin.com/in/muhammad-awais-webdev" class="social-button">
+                    <a href="https://www.linkedin.com/in/muhammad-awais-webdev" class="social-button" target="_blank">
                         <i class="fa-brands fa-linkedin-in"></i>
                         <span class="icon-text">LinkedIn</span>
                     </a>
-                    <a href="https://www.facebook.com/profile.php?id=61573732746181" class="social-button">
+                    <a href="https://www.facebook.com/profile.php?id=61573732746181" class="social-button" target="_blank">
                         <i class="fa-brands fa-facebook-f"></i>
                         <span class="icon-text">Facebook</span>
                     </a>
-                    <a href="https://x.com/WebMorph_Studio" class="social-button">
+                    <a href="https://x.com/WebMorph_Studio" class="social-button" target="_blank">
                         <i class="fa-brands fa-x-twitter"></i>
                         <span class="icon-text">X (Twetter)</span>
                     </a>
-                    <a href="#" class="social-button">
+                    <a href="https://github.com/muhammad-awais-web-dev/" class="social-button" target="_blank">
                         <i class="fa-brands fa-github"></i>
                         <span class="icon-text">Github</span>
                     </a>

styles.css

@@ -316,13 +316,13 @@ h2{
         display: block;
         z-index: 1001;
     }
-    .navbar-toggle.active .bar:nth-child(2){
+    #navbar-toggle.active .bar:nth-child(2){
         opacity: 0;
     }
-    .navbar-toggle.active .bar:nth-child(1){
+    #navbar-toggle.active .bar:nth-child(1){
         transform: translateY(8px) rotate(45deg);
     }
-    .navbar-toggle.active .bar:nth-child(3){
+    #navbar-toggle.active .bar:nth-child(3){
         transform: translateY(-8px) rotate(-45deg);
     }
     #hero{