fixed hamburger menu

jevelopment · May 28, 2020 · 93d4483 · 93d4483
1 parent cbaab5b
commit 93d4483
Show file tree

Hide file tree

Showing 2 changed files with 136 additions and 128 deletions.
diff --git a/_sass/header.scss b/_sass/header.scss
@@ -8,145 +8,147 @@
     }
 
     //start menu
-    #hammenuToggle
-{
-  display: block;
-  position: absolute;
-  top: 50px;
-  left: 50px;
-
-  z-index: 1;
-
-  -webkit-user-select: none;
-  user-select: none;
-}
+    #hammenuToggle{
+      display: block;
+      position: absolute;
+      top: 15px;
+      right: 15px;
+
+      z-index: 1;
+
+      -webkit-user-select: none;
+      user-select: none;
+    }
 
-#hammenuToggle a
-{
-  text-decoration: none;
-  color: #232323;
-
-  transition: color 0.3s ease;
-}
+    #hammenuToggle a
+    {
+      text-decoration: none;
+      color: #232323;
+      
+      transition: color 0.3s ease;
+    }
 
-#hammenuToggle a:hover
-{
-  color: tomato;
-}
+    #hammenuToggle a:hover
+    {
+      color: $base-color;
+    }
 
 
-#hammenuToggle input
-{
-  display: block;
-  width: 40px;
-  height: 32px;
-  position: absolute;
-  top: -7px;
-  left: -5px;
-
-  cursor: pointer;
-
-  opacity: 0; /* hide this */
-  z-index: 2; /* and place it over the hamburger */
-
-  -webkit-touch-callout: none;
-}
+    #hammenuToggle input
+    {
+      display: block;
+      width: 40px;
+      height: 32px;
+      position: absolute;
+      top: -7px;
+      left: -5px;
+      
+      cursor: pointer;
+      
+      opacity: 0; /* hide this */
+      z-index: 2; /* and place it over the hamburger */
+      
+      -webkit-touch-callout: none;
+    }
 
-/*
- * Just a quick hamburger
- */
-#hammenuToggle span
-{
-  display: block;
-  width: 33px;
-  height: 4px;
-  margin-bottom: 5px;
-  position: relative;
-
-  background: #cdcdcd;
-  border-radius: 3px;
-
-  z-index: 1;
-
-  transform-origin: 4px 0px;
-
-  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
-              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
-              opacity 0.55s ease;
-}
+    /*
+    * Just a quick hamburger
+    */
+    #hammenuToggle span
+    {
+      display: block;
+      width: 33px;
+      height: 4px;
+      margin-bottom: 5px;
+      position: relative;
+      
+      background: white;
+      border-radius: 3px;
+      
+      z-index: 1;
+      
+      transform-origin: 4px 0px;
+      
+      transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
+                  background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
+                  opacity 0.55s ease;
+    }
 
-#hammenuToggle span:first-child
-{
-  transform-origin: 0% 0%;
-}
+    #hammenuToggle span:first-child
+    {
+      transform-origin: 0% 0%;
+    }
 
-#hammenuToggle span:nth-last-child(2)
-{
-  transform-origin: 0% 100%;
-}
+    #hammenuToggle span:nth-last-child(2)
+    {
+      transform-origin: 0% 100%;
+    }
 
-/* 
- * Transform all the slices of hamburger
- * into a crossmark.
- */
-#hammenuToggle input:checked ~ span
-{
-  opacity: 1;
-  transform: rotate(45deg) translate(-2px, -1px);
-  background: #232323;
-}
+    /* 
+    * Transform all the slices of hamburger
+    * into a crossmark.
+    */
+    #hammenuToggle input:checked ~ span
+    {
+      opacity: 1;
+      transform: rotate(45deg) translate(-2px, -1px);
+      background: #232323;
+    }
 
-/*
- * But let's hide the middle one.
- */
-#hammenuToggle input:checked ~ span:nth-last-child(3)
-{
-  opacity: 0;
-  transform: rotate(0deg) scale(0.2, 0.2);
-}
+    /*
+    * But let's hide the middle one.
+    */
+    #hammenuToggle input:checked ~ span:nth-last-child(3)
+    {
+      opacity: 0;
+      transform: rotate(0deg) scale(0.2, 0.2);
+    }
 
-/*
- * Ohyeah and the last one should go the other direction
- */
-#hammenuToggle input:checked ~ span:nth-last-child(2)
-{
-  transform: rotate(-45deg) translate(0, -1px);
-}
+    /*
+    * Ohyeah and the last one should go the other direction
+    */
+    #hammenuToggle input:checked ~ span:nth-last-child(2)
+    {
+      transform: rotate(-45deg) translate(0, -1px);
+    }
 
-/*
- * Make this absolute positioned
- * at the top left of the screen
- */
-#menu
-{
-  position: absolute;
-  width: 300px;
-  margin: -100px 0 0 -50px;
-  padding: 50px;
-  padding-top: 125px;
-
-  background: #ededed;
-  list-style-type: none;
-  -webkit-font-smoothing: antialiased;
-  /* to stop flickering of text in safari */
-
-  transform-origin: 0% 0%;
-  transform: translate(-100%, 0);
-
-  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
-}
+    /*
+    * Make this absolute positioned
+    * at the top left of the screen
+    */
+    #menu
+    {
+      position: fixed;
+      width: 300px;
+      margin: 10px 0 200px -220px;
+      padding: 50px;
+
+     // background: #ededed;
+      background: white;
+      border: 2px solid $base-color;
+      opacity: 0.98;
+      border-radius: 30px;
+      list-style-type: none;
+      -webkit-font-smoothing: antialiased;
+      /* to stop flickering of text in safari */
+
+      transform-origin: 0% 0%;
+      transform: translate(100%);
+
+      transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
+    }
 
-#menu li
-{
-  padding: 10px 0;
-  font-size: 22px;
-}
+    #menu li
+    {
+      padding: 10px 0;
+      font-size: 22px;
+    }
 
-/*
- * And let's slide it in from the left
- */
-#hammenuToggle input:checked ~ ul
-{
-  transform: none;
-}
+    /*
+    * And let's slide it in from the left
+    */
+    #hammenuToggle input:checked ~ ul
+    {
+      transform: none;
+    }
 }
diff --git a/assets/css/mobile.scss b/assets/css/mobile.scss
@@ -14,6 +14,12 @@
             width: 50% !important;
         }
     }
+    #header{
+        h1{
+            padding: 10px;
+            padding-top: 7px;
+        }
+    }
     body{
         background-size: 286%;
         background-position-x: 31%;