add compresed navbar

carlosjorger · carlosjorger · commit 4a74e242a1fa · 2022-11-27T20:45:22.000-05:00
diff --git a/css/navbar.css b/css/navbar.css
@@ -1,3 +1,13 @@
+.navbar-uncompressed {
+    position: fixed;
+    top: 0;
+    width: 100%;
+    z-index: 9999;
+    background-color: rgba(9, 3, 15, 0.9);
+
+}
+
+
 .navbar {
     padding: 0.5em;
     display: flex;
@@ -15,9 +25,8 @@
     padding: 1em;
     color: var(--default-font-color);
     text-decoration: none;
-    /* background-image:none; */
     transition: all 0.5s ease-in-out;
-
+    
 }
 
 .nav-link:hover {
@@ -33,4 +42,38 @@
 
 .navbar>li {
     align-self: center;
+}
+
+.navbar-compressed {
+    display: none;
+    position: fixed;
+    top: 0;
+    width:100%;
+    z-index: 9999;
+    background-color: rgb(38, 26, 50);
+
+}
+
+.nav-header-menu {
+    padding: 0.5em;
+}
+
+.nav-menu {
+    margin-top: 0;
+    padding-left: 0;
+    height: 70vh;
+}
+
+.nav-element {
+    text-align: center;
+    padding: 0.5em;
+    transition: all 0.5s ease-in-out;
+}
+
+.nav-element:hover {
+    background-color: rgb(36, 28, 45);
+}
+
+.nav-link.compressed {
+    padding: 0;
 }
diff --git a/css/styles.css b/css/styles.css
@@ -67,14 +67,6 @@ i {
   color: var(--default-secundary-font-color);
 }
 
-nav {
-  position: fixed;
-  top: 0;
-  width: 100%;
-  z-index: 9999;
-  background-color: rgba(9, 3, 15, 0.9);
-
-}
 
 /* || UTILITIES */
 
@@ -103,7 +95,8 @@ nav {
   font-size: 2rem;
 
 }
-.centered-article{
+
+.centered-article {
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -232,6 +225,12 @@ nav {
     max-width: 85%;
   }
 
+  .navbar {
+    display: none !important;
+  }
+  .navbar-compressed {
+    display: block !important;
+  }
   section,
   footer {
     width: 83%;
@@ -246,7 +245,12 @@ nav {
   :root {
     font-size: 10px;
   }
-
+  .navbar {
+    display: none !important ;
+  }
+  .navbar-compressed {
+    display: block !important;
+  }
   p {
     max-width: 90%;
   }
diff --git a/index.html b/index.html
@@ -41,7 +41,7 @@
 
 <body>
   <header>
-    <nav>
+    <nav class="navbar-uncompressed">
       <ul class="navbar">
         <li id="home"> <a href="#" class="icon-link"><i class="fa fa-house fa-lg"></i></a></li>
         <li>
@@ -51,6 +51,26 @@
         </li>
       </ul>
     </nav>
+    <nav class="navbar-compressed">
+      <div class="nav-header-menu">
+        <a href="#" class="icon-link"><i class="fa fa-bars fa-lg"></i></a>
+      </div>
+      <ul class="nav-menu">
+        <li class="nav-element">
+          <a class="nav-link compressed" href="#"><h2>Home</h2></a>
+        </li>
+        <li class="nav-element">
+          <a class="nav-link compressed" href="#aboutMe"><h2>About me</h2></a>
+        </li>
+        <li class="nav-element">
+          <a class="nav-link compressed" href="#work"><h2>Work</h2></a>
+        </li>
+        <li class="nav-element">
+          <a class="nav-link compressed" href="#contact"><h2>Contact</h2></a>
+        </li>
+
+      </ul>
+    </nav>
   </header>
   <section>
     <div class="presentation centered-article">
