created navbar responsive across all screen sizes

ANSHIKA-26 · Oct 26, 2024 · 69ec8e1 · 69ec8e1
1 parent 7afb4a6
commit 69ec8e1
Show file tree

Hide file tree

Showing 8 changed files with 283 additions and 44 deletions.
diff --git a/blog.html b/blog.html
@@ -42,12 +42,12 @@ <h2>WordWise</h2>
         </a>
       </div>
 
-      <div class="hamburger" id="hamburger">
+      <div class="hamburger" id="hamburger" onclick="toggleHamburgerMenu()">
         <span></span>
         <span></span>
         <span></span>
       </div>
-      <div class="nav-links1">
+      <div class="nav-links1" id="navLinks">
         <a href= "index.html">Home</a>
         <a href= "blog.html">Leading Blog</a>
         <a href= "start_writing.html">Start Writing</a>
@@ -368,6 +368,17 @@ <h2>Forgot Password</h2>
   </div>
 </nav>
 
+
+
+<!-- <style>
+  @media(max-width: 376px){
+    .layout-container{
+      padding-right: 2.3rem;
+    }
+  }
+</style> -->
+
+
   <!--header-->
     <!--mainn-->
     <main id="site-main" style="margin-top: 8rem;">
@@ -1365,10 +1376,7 @@ <h2 class="footer-title secondary-title mt-2">Connect with us</h2>
   </footer>
   <!-- Script for Navbar Toggle -->
   <script>
-    function toggleMenu() {
-      const menu = document.getElementById('nav-menu');
-      menu.classList.toggle('active');
-    }
+
   </script>
   <!-- .footer -->
   <!-- this script is for twitter icon  starts -->
@@ -1483,7 +1491,7 @@ <h2 class="footer-title secondary-title mt-2">Connect with us</h2>
 <div class="gtranslate_wrapper"></div>
 <script>window.gtranslateSettings = {"default_language":"en","detect_browser_language":true,"wrapper_selector":".gtranslate_wrapper"}</script>
 <script src="https://cdn.gtranslate.net/widgets/latest/float.js" defer></script>
-
+<script src="script.js"></script>
 
 </body>
 </html>
diff --git a/category.html b/category.html
@@ -56,12 +56,12 @@ <h2>WordWise</h2>
                 </a>
             </div>
 
-            <div class="hamburger" id="hamburger">
+            <div class="hamburger" id="hamburger" onclick="toggleHamburgerMenu()">
                 <span></span>
                 <span></span>
                 <span></span>
             </div>
-        <div class="nav-links1">
+        <div class="nav-links1" id="navLinks">
             <a href="index.html">Home</a>
             <a href="blog.html">Leading Blog</a>
             <a href="start_writing.html">Start Writing</a>
@@ -808,20 +808,20 @@ <h3>Can I contribute to multiple categories?</h3>
             if (savedMode === 'dark') {
                 document.body.classList.add('dark-mode');
                 checkbox.checked = true;
-                modeLabel.textContent = 'Dark Mode';
+                modeLabel.textContent = '';
             } else {
-                modeLabel.textContent = 'Light Mode';
+                modeLabel.textContent = '';
             }
 
             checkbox.addEventListener('change', function() {
                 if (this.checked) {
                     document.body.classList.add('dark-mode');
                     localStorage.setItem('darkMode', 'dark');
-                    modeLabel.textContent = 'Dark Mode';
+                    modeLabel.textContent = '';
                 } else {
                     document.body.classList.remove('dark-mode');
                     localStorage.setItem('darkMode', 'light');
-                    modeLabel.textContent = 'Light Mode';
+                    modeLabel.textContent = '';
                 }
             });
 
@@ -886,7 +886,7 @@ <h3>Can I contribute to multiple categories?</h3>
 <div class="gtranslate_wrapper"></div>
 <script>window.gtranslateSettings = {"default_language":"en","detect_browser_language":true,"wrapper_selector":".gtranslate_wrapper"}</script>
 <script src="https://cdn.gtranslate.net/widgets/latest/float.js" defer></script>
-
+<script src="script.js"></script>
 
 </body>
 

diff --git a/contact_us.html b/contact_us.html
@@ -99,12 +99,12 @@
           <h2>WordWise</h2>
         </a>
       </div>
-      <div class="hamburger" id="hamburger">
+      <div class="hamburger" id="hamburger" onclick="toggleHamburgerMenu()">
         <span></span>
         <span></span>
         <span></span>
       </div>
-      <div class= "nav-links1">
+      <div class= "nav-links1" id="navLinks">
         <a href= "index.html">Home</a>
         <a href= "blog.html">Leading Blog</a>
         <a href= "start_writing.html">Start Writing</a>
@@ -697,7 +697,7 @@ <h2 class="footer-title secondary-title mt-5">Connect with us</h2>
   <div class="gtranslate_wrapper"></div>
 <script>window.gtranslateSettings = {"default_language":"en","detect_browser_language":true,"wrapper_selector":".gtranslate_wrapper"}</script>
 <script src="https://cdn.gtranslate.net/widgets/latest/float.js" defer></script>
-
+<script src="script.js"></script>
 
 </body>
 

diff --git a/give_feedback.html b/give_feedback.html
@@ -99,12 +99,12 @@
           <h2>WordWise</h2>
         </a>
       </div>
-      <div class="hamburger" id="hamburger">
+      <div class="hamburger" id="hamburger" onclick="toggleHamburgerMenu()">
         <span></span>
         <span></span>
         <span></span>
       </div>
-      <div class= "nav-links1">
+      <div class= "nav-links1" id="navLinks">
         <a href= "index.html">Home</a>
         <a href= "blog.html">Leading Blog</a>
         <a href= "start_writing.html">Start Writing</a>
@@ -745,7 +745,7 @@ <h2 class="footer-title secondary-title mt-5">Connect with us</h2>
   <div class="gtranslate_wrapper"></div>
 <script>window.gtranslateSettings = {"default_language":"en","detect_browser_language":true,"wrapper_selector":".gtranslate_wrapper"}</script>
 <script src="https://cdn.gtranslate.net/widgets/latest/float.js" defer></script>
-
+<script src="script.js"></script>
 
 </body>
 

diff --git a/index.html b/index.html
@@ -201,12 +201,7 @@
 
 
 <!-- Script for Navbar Toggle -->
- <script>
-    function toggleMenu() {
-    const menu = document.getElementById('nav-menu');
-    menu.classList.toggle('active');
-}
- </script>
+
     <script src="https://accounts.google.com/gsi/client" async defer></script>
 
 </head>
@@ -231,12 +226,12 @@
 
     }
 
-    .nav-links1 {
+    /* .nav-links1 {
     display: flex;
     gap: 30px;
-    }
+    } */
 
-    .hamburger {
+    /* .hamburger {
     display: none;
     cursor: pointer;
     flex-direction: column;
@@ -252,7 +247,7 @@
     }
 
     @media (max-width: 1024px) {
-        .logo h1 a{
+        .logo a h2{
         font-size: 30px;   
     }
     .nav-links1 {
@@ -267,7 +262,7 @@
         display: flex;
         align-items: center;
         justify-content: center;
-        /* Add styling for visibility, like color, size, etc. */
+        Add styling for visibility, like color, size, etc.
     }
 
     .nav-links1 {
@@ -293,12 +288,12 @@
     }
 }
 
-/* Additional styling for smaller screens */
+Additional styling for smaller screens
 @media (max-width: 576px) {
     .logo {
         margin-left: -75px;
     }
-    .logo h1 a {
+    .logo a h2 {
         font-size: 30px;
     }
     .dropdown {
@@ -314,10 +309,10 @@
     .logo {
         margin-left: -65px;
     }
-    .logo h1 a {
+    .logo a h2 {
         font-size: 24px;
     }
-}
+} */
 
 
     .dropdown-menu {
@@ -347,7 +342,9 @@
             <header>
 
                 <div class="logo">
-                    <h1><a href="index.html">WordWise</a></h1>
+                    <a href="index.html">
+                        <h2>WordWise</h2>
+                      </a>
                 </div>
                 <div class="hamburger" id="hamburger" onclick="toggleHamburgerMenu()">
                     <span></span>
@@ -472,6 +469,8 @@ <h2>Forgot Password</h2>
     }
 </script>
 
+
+
 <!-- Styles -->
 <style>
     .form-popup {
@@ -563,10 +562,7 @@ <h2>Forgot Password</h2>
 
 <!-- JavaScript for Hamburger Menu Toggle -->
 <script>
-function toggleHamburgerMenu() {
-const navLinks = document.getElementById('navLinks');
-navLinks.classList.toggle('active');
-}
+
 </script>
 
 
@@ -1529,5 +1525,8 @@ <h2 class="footer-title secondary-title mt-5">Connect with us</h2>
 
 
 
+
+
+
 </body>
 </html>
diff --git a/script.js b/script.js
@@ -126,3 +126,42 @@ function updateWord(wordData) {
 
 // Call the function to load the word of the day
 loadWordOfTheDay();
+//hamburger (Responsive)
+
+// function toggleHamburgerMenu() {
+//   const navLinks = document.getElementById('navLinks');
+//   navLinks.classList.toggle('active');
+//   }
+
+function toggleHamburgerMenu() {
+
+
+  const navLinks = document.getElementById('navLinks');
+  const isActive = navLinks.classList.toggle('active'); // Toggle 'active' class
+
+  if (isActive) {
+    console.log("active");
+
+    // Close the menu when clicking outside
+    document.addEventListener('click', closeOnOutsideClick);
+  } else {
+    console.log("inactive");
+
+    // Remove the event listener when menu is closed
+    document.removeEventListener('click', closeOnOutsideClick);
+  }
+}
+
+function closeOnOutsideClick(event) {
+
+
+  const navLinks = document.getElementById('navLinks');
+  const hamburger = document.getElementById('hamburger');
+
+  if (!navLinks.contains(event.target) && !hamburger.contains(event.target)) {
+    console.log("menu close");
+
+    navLinks.classList.remove('active'); // Close the menu
+    document.removeEventListener('click', closeOnOutsideClick); // Remove the listener
+  }
+}
diff --git a/start_writing.html b/start_writing.html
@@ -76,12 +76,12 @@
             <h2>WordWise</h2>
           </a>
         </div>
-        <div class="hamburger" id="hamburger">
+        <div class="hamburger" id="hamburger" onclick="toggleHamburgerMenu()">
           <span></span>
           <span></span>
           <span></span>
         </div>
-        <div class="nav-links1">
+        <div class="nav-links1" id="navLinks">
             <a href="index.html">Home</a>
             <a href="blog.html">Leading Blog</a>
             <a href="start_writing.html">Start Writing</a>
@@ -816,7 +816,7 @@ <h3>Can I upload images with my blog post?</h3>
 <div class="gtranslate_wrapper"></div>
 <script>window.gtranslateSettings = {"default_language":"en","detect_browser_language":true,"wrapper_selector":".gtranslate_wrapper"}</script>
 <script src="https://cdn.gtranslate.net/widgets/latest/float.js" defer></script>
-
+<script src="script.js"></script>
 
   </body>
 </html>