Merge pull request #1629 from lokeshazad10/fix/navbarUI

Fix/navbar UI
khushi-joshi-05 · Oct 12, 2024 · d8bb6e5 · d8bb6e5
2 parents e5ddf76 + 95238b6
commit d8bb6e5
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 33 deletions.
diff --git a/Css-files/mode-toggler.css b/Css-files/mode-toggler.css
@@ -1,11 +1,11 @@
-.toggle-container {
+/* .toggle-container {
   transform: translate(-50%, -50%);
   display: flex;
   align-items: center;
   justify-content: center;
   right: -4px;
   top: 15px;
-  /* position: fixed; */
+  position: fixed;
   top: 40px;
   right: 20%;
   z-index: 100;
@@ -16,7 +16,7 @@
   width: 40px;
   height: 20px;
   margin-top: 10px;
-}
+} */
 
 
 /* Hidden Checkbox */
@@ -26,7 +26,7 @@
 
 .theme-switch {
   position: relative;
-  width: 45px;
+  width: 50px;
   height: 30px;
   background-color: #ccc;
   border-radius: 20px;
@@ -44,7 +44,7 @@
   font-size: 19px;
   position: absolute;
   cursor: pointer;
-  top: 50%;
+  /* top: 50%; */
   transform: translateY(-50%);
   transition: opacity 0.5s ease, color 0.5s ease;
 }
@@ -84,6 +84,6 @@
 }
 
 .switch-checkbox:checked + .theme-switch .toggle-button {
-  transform: translateX(13px);
+  transform: translateX(18px);
   /* background-color: #34495e; */
 }
diff --git a/Css-files/navbar.css b/Css-files/navbar.css
@@ -106,8 +106,7 @@
 
 .nav-link {
 
-  color:var(--a)
-
+  color:var(--a);
   color: var(--primary-text-color);
   padding: 4px 8px;
   border-radius: 4px;
@@ -117,7 +116,7 @@
 
 .nav-link:hover {
   background-color: var(--light-red);
-  color: #fff;
+  color: #fff !important;
 
   transform: scale(1.1);
   border-radius: 5px;

diff --git a/index.html b/index.html
@@ -156,7 +156,7 @@
 
 <body>
 
-    <div class="circle-container">
+    <!-- <div class="circle-container">
         <div class="circle"></div>
         <div class="circle"></div>
         <div class="circle"></div>
@@ -225,7 +225,7 @@
     
           animateCircles();
         });
-      </script>
+      </script> -->
 
     <div class="visitor-counter">
         <div>Visitors</div>
@@ -275,24 +275,21 @@
 
         <div class="rope"></div>
         <img id="caduceus" src="Images/image.png" alt="Caduceus">
-      </div> --> 
+      </div>
     <nav class="navbar navbar-expand-lg fixed-top">
         <div class="container-fluid">
             <!-- Brand Logo -->
 
-
-                <img src="./Images/logo/Foodielogo.png" height="30" alt="Brand Logo" >
+
             <a href="index.html">
                 <img id="theme-toggle-logo" 
                 style="height: 50px; width: 50px;"
                 src="Images/logo/Logo-Light.png"  alt="Brand Logo">
-
-
             </a>
 
             <!-- Centered Navbar Links -->
             <div 
-            style=" margin-left: 25vw;"
+            style=" margin-left: 20vw;"
             class="collapse navbar-collapse hamburgeritems centerdiv order-2 order-lg-0">
                 <ul class="navbar-nav center-links">
                     <li class="nav-item">
@@ -361,24 +358,9 @@
 
                 </ul>
             </div>
-            <!-- Theme Toggle Icon -->
-
-
-                <img class="nav-link" src="./Images/navbar/moon.png" id="theme-toggle-icon" alt="theme toggler button" >
-
+
             <span class="slider" style="width: 40px; height: 20px; display: none;"></span> 
 
-
-            <div id="sun-moon-mode-toggler" class="toggle-container" >
-              <input type="checkbox" id="themeToggle" class="switch-checkbox" onclick="toggleTheme()">
-              <label  id="themeChangeToggle" class="theme-switch" for="themeToggle">
-              <div class="toggle-button">
-                  <span class="light-mode-icon"><img src="Images/navbar/sun.png" style = "display: block;"></span>
-                  <span class="dark-mode-icon"><img src="Images/navbar/moon.png"style = "display: block;"></span>
-              </div>
-              </label>
-          </div>
-
 
             <!-- Navbar Toggler -->
 
@@ -455,6 +437,14 @@
                 </ul>
             </div>
         </div>
+        <!-- Theme Toggle Icon -->
+        <div id="sun-moon-mode-toggler" class="toggle-container" >
+            <input type="checkbox" id="themeToggle" class="switch-checkbox" onclick="toggleTheme()">
+            <label  id="themeChangeToggle" class="theme-switch" for="themeToggle">
+            <div class="toggle-button">
+            </div>
+            </label>
+          </div>
     </nav>