Navbar bugs

Author: sneha-tech03

about.css

@@ -47,7 +47,7 @@ line-height: 1.6;
   background: #8B0000; 
 }
 
-.header{
+.header2{
     background-color: #fde74c40;
 }
 .header1 {

about.html

@@ -19,6 +19,7 @@
     <meta property="twitter:title" content="About The Cawnpore Magazine - Our Mission and Vision">
     <meta property="twitter:description" content="Learn about our mission to document and preserve Kanpur's historical narratives and cultural heritage.">
     <meta property="twitter:image" content="https://thecawnporemag.github.io/assets/images/about-og-image.jpg">
+    <link rel="stylesheet" href="style.css">
     <link rel = "stylesheet" href="about.css">
     <link rel="icon" href="assets/favicon.ico" type="image/x-icon">
     <link rel="preconnect" href="https://fonts.googleapis.com">
@@ -151,15 +152,15 @@
     <div class="progress-container">
       <div class="progress-bar" id="progressBar"></div>
     </div>
-    <section class="header">
+    <section class="header2">
         <nav role="navigation" aria-label="Main Menu">
           <!-- Logo on the left -->
-        <a href="index.html">
-          <img src="assets/favicon.ico" alt="Logo" class="navbar-logo" />
-        </a>
-        
-          <div class = "nav-links" id="navLinks">
-            <i class="fa fa-times" onclick="hideMenu()"></i>
+    <a href="index.html">
+      <img src="assets/favicon.ico" alt="Logo" class="navbar-logo" />
+    </a>
+    
+    <div class="nav-links" id="navLinks">
+      <i class="fa fa-times" onclick="hideMenu()"></i>
           <ul>
 
             <li><a href="index.html">HOME</a></li>
@@ -176,9 +177,11 @@
             <li><a href="login.html" class="btn">LOGIN</a></li>
             <li><a href="signup.html" class="btn">REGISTER</a></li>
           </ul>
-          </div>
-          <i class="fa fa-bars" onclick="showMenu()"></i>
-        </nav>
+    </div>
+
+   <i class="fa fa-bars" id="menuIcon" onclick="showMenu()"></i>
+
+  </nav>
 
     </section>
     <section class="header1">
@@ -334,6 +337,15 @@ <h2>Kanpur Zoological Park</h2>
         </div>
     <script>
         // template gallery slider
+            function showMenu() {
+      document.getElementById("navLinks").style.right = "0";
+      document.body.style.overflow = "hidden";
+    }
+
+    function hideMenu() {
+      document.getElementById("navLinks").style.right = "-200px";
+      document.body.style.overflow = "auto";
+    }
   const template_slider = document.querySelector(".template-slider");
   const template_slides = template_slider.querySelectorAll("li");
   const slideCount = template_slides.length;

gallery.css

@@ -38,31 +38,31 @@ h1::after {
 
 /* Navbar Styles */
 nav {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 0.75rem 5%;
-    margin-right: 6px;
-    background: linear-gradient(135deg,
-        rgb(99, 0, 0),
-        rgba(218, 67, 67, 0.665),
-        rgb(71, 22, 22),
-        rgba(17, 16, 16, 0.3)
-
-    );
-    background-size: 400% 400%; /* make the gradient larger to animate */
-    animation: gradientMove 5s linear infinite;
-
-    backdrop-filter: blur(8px);
-    border: 1px solid rgba(255, 255, 255, 0.3);
-    border-bottom: 1px solid rgba(179, 177, 177, 0.2);
-    position: fixed;
-    top: 0;
-    height: 70px;
-    width: 100%;
-    z-index: 999;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.75rem 5%;
+  margin-right: 6px;
+  background: linear-gradient(
+    135deg,
+    rgb(99, 0, 0),
+    rgba(218, 67, 67, 0.665),
+    rgb(71, 22, 22),
+    rgba(17, 16, 16, 0.3)
+  );
+  background-size: 400% 400%;
+  animation: gradientMove 5s linear infinite;
+  backdrop-filter: blur(8px);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  border-bottom: 1px solid rgba(179, 177, 177, 0.2);
+  position: fixed;
+  top: 0;
+  height: 70px;
+  width: 100%;
+  z-index: 999;
 }
 
+
 /* Animation Keyframes */
 @keyframes gradientMove {
     0% {
@@ -389,4 +389,4 @@ button:hover {
   .circle {
     display: none !important;
   }
-}
+}

gallery.html

@@ -18,24 +18,24 @@
     <meta property="twitter:url" content="https://thecawnporemag.github.io/gallery.html">
     <meta property="twitter:title" content="Historical Gallery - The Cawnpore Magazine | Visual Archive of Kanpur">
     <meta property="twitter:description" content="Explore our visual archive of historical photographs, maps, and documents related to Kanpur's rich heritage.">
-    <meta property="twitter:image" content="https://thecawnporemag.github.io/assets/images/gallery-og.jpg">
+   <link rel="stylesheet" href="style.css">
     <link rel="stylesheet" href="gallery.css" />
-    <link rel="stylesheet" href="style.css" />
+     <meta property="twitter:image" content="https://thecawnporemag.github.io/assets/images/gallery-og.jpg">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
     />
     <link rel="icon" href="assets/favicon.ico" type="image/x-icon" />
   </head>
   <body>
-    <nav role="navigation" aria-label="Main Menu">
-      <!-- Logo on the left -->
-      <a href="index.html">
-        <img src="assets/favicon.ico" alt="Logo" class="navbar-logo" />
-      </a>
-
-      <div class="nav-links" id="navLinks">
-        <i class="fa fa-times" onclick="hideMenu()"></i>
+     <nav role="navigation" aria-label="Main Menu">
+          <!-- Logo on the left -->
+    <a href="index.html">
+      <img src="assets/favicon.ico" alt="Logo" class="navbar-logo" />
+    </a>
+    
+    <div class="nav-links" id="navLinks">
+      <i class="fa fa-times" onclick="hideMenu()"></i>
           <ul>
 
             <li><a href="index.html">HOME</a></li>
@@ -52,11 +52,11 @@
             <li><a href="login.html" class="btn">LOGIN</a></li>
             <li><a href="signup.html" class="btn">REGISTER</a></li>
           </ul>
-      </div>
+    </div>
 
-      <i class="fa fa-bars" onclick="showMenu()"></i>
-    </nav>
+   <i class="fa fa-bars" onclick="showMenu()"></i>
 
+  </nav>
     <button
       onclick="history.back()"
       style="
@@ -351,6 +351,15 @@ <h3>Subscribe to our Newsletter</h3>
   }
 
   animateCircles();
+   function showMenu() {
+      document.getElementById("navLinks").style.right = "0";
+      document.body.style.overflow = "hidden";
+    }
+
+    function hideMenu() {
+      document.getElementById("navLinks").style.right = "-200px";
+      document.body.style.overflow = "auto";
+    }
   </script>
   </body>
 </html>

issue.css

@@ -117,7 +117,7 @@ nav {
     border-bottom: 1px solid rgba(179, 177, 177, 0.2);
     position: fixed;
     top: 0;
-    height: 45px;
+    height: 10vh;
     width: 100%;
     z-index: 999;
 }
@@ -135,11 +135,6 @@ nav {
     }
 }
 
-.navbar-logo {
-  height: 40px;
-  margin-right: 16px;
-  vertical-align: middle;
-}
 
 .header1 {
   background-color: #780000;
@@ -174,46 +169,16 @@ nav {
   font-size: 20px;
 }
 
-.nav-links {
+.-links {
   flex: 1;
   text-align: center;
   position: relative;
   z-index: 10;
   align-items: center;
 }
 
-.nav-links ul li {
-  list-style: none;
-  display: inline-block;
-  position: relative;
-}
 
-.nav-links ul li a {
-  color: #fdf0d5;
-  text-decoration: none;
-  font-family: serif;
-  font-size: 13px;
-  padding: 12px 16px;
-  display: block;
-  border-radius: 6px;
-}
-.nav-links ul li a:hover {
-  text-decoration: none; /* REMOVE underline */
-}
 
-.nav-links ul li::after {
-  content: "";
-  width: 0%;
-  height: 2px;
-  background: #fdf0d5;
-  display: block;
-  margin: auto;
-  transition: 0.5s;
-}
-
-.nav-links ul li:hover::after {
-  width: 100%;
-}
 .btn{
   background-color: #9e7916;
 }
@@ -228,51 +193,15 @@ nav {
   box-shadow: 0 0 15px rgba(216, 165, 46, 0.922);
   }
 
-nav .fa {
-  display: none;
-}
 @media (max-width: 700px) {
   .text-box h1 {
     margin-top: 15px;
     font-weight: 700;
     font-style: italic;
     font-size: 40px;
   }
-  .nav-links ul li {
-    display: block;
-  }
-  .nav-links {
-    position: fixed;
-    background: linear-gradient(135deg, #d24848, #7a0000, #cea8bc);
-    height: 100vh;
-    width: 200px;
-    top: 0;
-    right: -100%;
-    text-align: left;
-    z-index: 2;
-    box-shadow: -8px 0 20px rgba(0, 0, 0, 0.5);
-    transition: right 0.4s ease-in-out;
-  }
 
-  nav .fa {
-    display: block;
-    color: #663346;
-    margin: 10px;
-    font-size: 22px;
-    cursor: pointer;
-    z-index: 10;
-    background: linear-gradient(
-      135deg,
-      #fdfbfb,
-      #ebedee
-    ); /* soft gradient backdrop */
-    padding: 10px;
-    border-radius: 12px;
-    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
-  }
-  .nav-links ul {
-    padding: 30px;
-  }
+  
    .btn{
   background: linear-gradient(90deg, #f3b200, #dcceaea1);
   font-weight: 600;

issue.html

@@ -5,6 +5,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>ISSUES</title>
+    <link rel="stylesheet" href="style.css">
     <link rel="stylesheet" href="issue.css" />
     <link rel="icon" href="assets/favicon.ico" type="image/x-icon" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
@@ -309,6 +310,17 @@ <h3>Subscribe to our Newsletter</h3>
         <p>&copy; <span id="year"></span> THE CAWNPORE — ALL RIGHTS RESERVED</p>
       </div>
     </footer>
+    <script>
+      function showMenu() {
+      document.getElementById("navLinks").style.right = "0";
+      document.body.style.overflow = "hidden";
+    }
+
+    function hideMenu() {
+      document.getElementById("navLinks").style.right = "-200px";
+      document.body.style.overflow = "auto";
+    }
+    </script>
     <script src="index.js"></script>
   </body>
 </html>