Fix position hamburger and centering element text typing

ZakaCoding · ZakaCoding · commit 3ea8016be15b · 2021-07-29T14:16:51.000+07:00
diff --git a/css/main.css b/css/main.css
@@ -5,11 +5,12 @@
 html,body {
     margin: 0px;
     padding: 0px;
+    height: 100%;
 }
 
 .main {
     width: 100%;
-    height: 100vh;
+    height: 100%;
     margin:0px;
     padding:0px;
     position:relative;
@@ -18,9 +19,10 @@ html,body {
 .text-typing {
     display:flex;
     justify-content:center;
-    margin-left: auto;
-    margin-right: auto;
-    vertical-align: bottom;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%,-50%);
 }
 
 h1 {
@@ -75,6 +77,6 @@ h1 {
 }
 
 #hamburger {
-    position: relative;
+    position: absolute;
     z-index: 999;
 }
diff --git a/index.html b/index.html
@@ -14,22 +14,20 @@
 </head>
 <body>
     <!-- navigation menu -->
-    <nav role="navigation">
-        <!-- hamburger menu -->
-        <button type="button" id="hamburger" class="hamburger hamburger--elastic">
-            <span class="hamburger-box">
-                <span class="hamburger-inner"></span>
-            </span>
-        </button>
+    <!-- hamburger menu -->
+    <button type="button" id="hamburger" class="hamburger hamburger--elastic">
+        <span class="hamburger-box">
+            <span class="hamburger-inner"></span>
+        </span>
+    </button>
 
-        <!-- menu with pure css ! -->
-        <div class="menuToggle">
-            <ul class="menu">
-                <!-- <a href="#"></a> -->
-                Nothing happen here :(
-            </ul>
-        </div>
-    </nav>
+    <!-- menu with pure css ! -->
+    <div class="menuToggle">
+        <ul class="menu">
+            <!-- <a href="#"></a> -->
+            Nothing happen here :(
+        </ul>
+    </div>
 
     <!-- main -->
     <div class="main">
