fixed navbar (#383)

CSEdgeOfficial · Jun 1, 2024 · 65df1b8 · 65df1b8
1 parent b0368bb
commit 65df1b8
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 14 deletions.
diff --git a/home.html b/home.html
@@ -50,23 +50,26 @@
     <nav class="fixed-top">
 
         <h1 id="home">CSEdge</h1>
-        <img style="outline: none;" src="./Images/Menu.svg" alt="Menu">
-        <ul class="nav-item navbar">
-            <li class="navitem"><a href="#hero"><i class="fas fa-home navbar-icons"></i> Home</a></li>
-
-            <li class="navitem"><a href="#AboutUS"><i class="fas fa-info-circle navbar-icons"></i> About us</a></li>
-            <li class="navitem"><a href="#internship"><i class="fas fa-user-graduate navbar-icons"></i> Internship</a></li>
-            <li class="navitem" class="contact"><a href="#contact"><i class="fa fa-envelope navbar-icons"></i> Contact</a></li>
-            <li class="navitem"><a href="./Resources.html"><i class="fas fa-book-open navbar-icons"></i> Free Content</a></li>
-      <!--     <li class="navitem"><a href="https://learn.csedge.courses"><i class="fas fa-blog navbar-icons"></i> Blog</a></li>--> 
-            <li class="navitem"><a href="index.html"><i class="fas fa-blog navbar-icons"></i> Blog</a></li>
-            <li class="navitem"><a href="#faq"><i class="fas fa-question-circle navbar-icons"></i> FAQ</a></li>
-        </ul>
-
-        <label class="switch">
+        <div class="navbar-ham-switch">
+           <img style="outline: none;" src="./Images/Menu.svg" alt="Menu">
+           <ul class="nav-item navbar">
+               <li class="navitem"><a href="#hero"><i class="fas fa-home navbar-icons"></i> Home</a></li>
+
+               <li class="navitem"><a href="#AboutUS"><i class="fas fa-info-circle navbar-icons"></i> About us</a></li>
+               <li class="navitem"><a href="#internship"><i class="fas fa-user-graduate navbar-icons"></i> Internship</a></li>
+               <li class="navitem" class="contact"><a href="#contact"><i class="fa fa-envelope navbar-icons"></i> Contact</a></li>
+               <li class="navitem"><a href="./Resources.html"><i class="fas fa-book-open navbar-icons"></i> Free Content</a></li>
+        <!--   <li class="navitem"><a href="https://learn.csedge.courses"><i class="fas fa-blog navbar-icons"></i> Blog</a></li>--> 
+               <li class="navitem"><a href="index.html"><i class="fas fa-blog navbar-icons"></i> Blog</a></li>
+               <li class="navitem"><a href="#faq"><i class="fas fa-question-circle navbar-icons"></i> FAQ</a></li>
+           </ul>
+           <label class="switch">
             <input type="checkbox" id="dark-mode-toggle">
             <span class="slider round"></span>
           </label>
+        </div>
+
+
     </nav>
 
     <!--Hero Section-->

diff --git a/navbar.css b/navbar.css
@@ -69,6 +69,10 @@ nav ul li.logo {
     margin-right: auto; /* Pushes logo to the far left */
 }
 
+.navbar-ham-switch{
+    display: flex;
+}
+
 .navbar-contact {
     display: flex;
     align-items: center;