change direction of the navbar

Author: carlosjorger

css/navbar.css

@@ -1,96 +1,93 @@
 .navbar-uncompressed {
-    position: fixed;
-    top: 0;
-    width: 100%;
-    z-index: 9999;
-    background-color: rgba(9, 3, 15, 0.9);
-
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: 9999;
+  background-color: rgba(9, 3, 15, 0.9);
 }
 
-
 .navbar {
-    padding: 0.5em;
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    margin: 0;
+  padding: 0.5em;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  margin: 0;
 }
 
 #home {
-    padding: 1em;
-    align-self: center;
+  padding: 1em;
+  align-self: center;
 }
 
 .nav-link {
-    padding: 1em;
-    color: var(--default-font-color);
-    text-decoration: none;
-    transition: all 0.5s ease-in-out;
-
+  padding: 1em;
+  color: var(--default-font-color);
+  text-decoration: none;
+  transition: all 0.5s ease-in-out;
 }
 
 .nav-link:hover {
-    background-color: rgb(36, 28, 45);
-    color: var(--default-secundary-font-color) !important
+  background-color: rgb(36, 28, 45);
+  color: var(--default-secundary-font-color) !important;
 }
 
 .nav-link:visited {
-    color: var(--default-font-color);
-    text-decoration: none;
-    background-image: none;
+  color: var(--default-font-color);
+  text-decoration: none;
+  background-image: none;
 }
 
-.navbar>li {
-    align-self: center;
+.navbar > li {
+  align-self: center;
 }
 
 .navbar-compressed {
-    display: none;
-    position: fixed;
-    top: 0;
-    width: 100%;
-    z-index: 2;
-    background-color: rgb(38, 26, 50);
-
+  display: none;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: 2;
+  background-color: rgb(38, 26, 50);
 }
 
 .nav-header-menu {
-    position: absolute;
-    padding: 0.5em;
-    z-index: 3;
-    width: 100%;
-    background-color: rgb(38, 26, 50);
+  position: absolute;
+  padding: 1em;
+  z-index: 2;
+  width: 100%;
+  background-color: rgb(38, 26, 50);
 }
 
 #nav-columnar-menu {
-    position: absolute;
-    margin-top: 0;
-    padding-left: 0;
-    height: 40vh;
-    background-color: rgb(38, 26, 50);
-    width: 100%;
-    z-index: 2;
-    top: -40vh;
-    transition: all 0.3s ease-in;
-
+  position: absolute;
+  margin-top: 0;
+  padding:2em;
+  background-color: rgb(38, 26, 50);
+  width: 60%;
+  z-index: 3;
+  left: -100vw;
+  list-style-type: none;  
+  transition: all 0.3s ease-in;
 }
 
 #nav-columnar-menu.active {
-    top: 1em;
-    transition: all 0.8s ease-in;
+  transition: all 0.8s ease-in;
+  width: 60%;
+  left: 0;
 
+  height: 100vh;
 }
 
 .nav-element {
-    text-align: center;
-    padding: 0.5em;
-    transition: all 0.5s ease-in-out;
+  text-align: left;
+  padding: 0.5em;
+  transition: all 0.5s ease-in-out;
 }
 
 .nav-element:hover {
-    background-color: rgb(36, 28, 45);
+  background-color: rgb(36, 28, 45);
 }
 
 .nav-link.compressed {
-    padding: 0;
-}
+  padding: 0;
+}

css/styles.css

@@ -46,7 +46,9 @@ section {
 }
 
 .opacity-effect {
-  filter: opacity(20%) grayscale(70%);
+  filter: opacity(50%);
+  -webkit-filter:  opacity(50%) ;
+  /* backdrop-filter: opacity(20%) grayscale(70%); */
 }
 
 

index.html

@@ -53,20 +53,20 @@
     </nav>
     <nav class="navbar-compressed">
       <div class="nav-header-menu">
-        <a class="icon-link" id="show-nav-columnar-menu"><i class="fa fa-bars fa-lg"></i></a>
+        <a class="icon-link" id="show-nav-columnar-menu"><i class="fa fa-bars fa-xl"></i></a>
       </div>
       <ul id="nav-columnar-menu">
         <li class="nav-element">
-          <a class="nav-link compressed" href="#"><h2>Home</h2></a>
+          <a class="nav-link compressed" href="#"><h1>Home</h1></a>
         </li>
         <li class="nav-element">
-          <a class="nav-link compressed" href="#aboutMe"><h2>About me</h2></a>
+          <a class="nav-link compressed" href="#aboutMe"><h1>About me</h1></a>
         </li>
         <li class="nav-element">
-          <a class="nav-link compressed" href="#work"><h2>Work</h2></a>
+          <a class="nav-link compressed" href="#work"><h1>Work</h1></a>
         </li>
         <li class="nav-element">
-          <a class="nav-link compressed" href="#contact"><h2>Contact</h2></a>
+          <a class="nav-link compressed" href="#contact"><h1>Contact</h1></a>
         </li>
 
       </ul>

index.js

@@ -22,10 +22,13 @@ document.addEventListener("DOMContentLoaded", function (event) {
         if (navColumnarMenu.classList.contains('active')) {
           navColumnarMenu.classList.remove("active");
           document.getElementsByTagName("main")[0].classList.remove('opacity-effect')
+          document.getElementsByClassName("nav-header-menu")[0].classList.remove('opacity-effect')
         }
         else if(element.id==='show-nav-columnar-menu'){
           navColumnarMenu.classList.add("active");
           document.getElementsByTagName("main")[0].classList.add('opacity-effect')
+          document.getElementsByClassName("nav-header-menu")[0].classList.add('opacity-effect')
+
         }
 
       })