Merge pull request #776 from Karthikgouda15/main

Added responsiveness to the Nav bar
PriyaGhosal · Oct 21, 2024 · 2d8c7a8 · 2d8c7a8
2 parents 7fbbcc3 + 0f99888
commit 2d8c7a8
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 4 deletions.
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -427,7 +427,7 @@ body.nav-active .navbar-list .navbar-link {
   position: fixed;
   top: 0;
   left: -320px;
-  max-width: 320px;
+  max-width: 100vw;
   width: 100%;
   background-color: var(--white);
   height: 100vh;
@@ -476,7 +476,7 @@ body.nav-active .navbar-list .navbar-link {
   position: fixed;
   top: 0;
   left: 0;
-  width: 320px;
+  width: 100vw;
   height: 100vh;
   background-color: white;
 
@@ -2244,4 +2244,20 @@ body {
   #theme-toggle{
     right:20px;
   }
-}
+}
+
+@media screen and (max-width: 820px) {
+  .navbar {
+    max-width: 150vw;
+
+  }
+}
+
+@media screen and (max-width: 768) {
+  .overlay {
+    width:110vw;
+    height:110vh;
+
+  }
+}
+
diff --git a/index.html b/index.html
@@ -843,7 +843,7 @@ <h3 class="title-lg card-title">
 
         </ul>
         <div class="button-container">
-          <a href="#" class="btn btn-primary" data-aos="zoom-in">
+          <a href="Course.html" class="btn btn-primary" data-aos="zoom-in">
             View All Courses
           </a>
         </div>