fixed clipped header

Author: leebyron

site/_css/graphql.less

@@ -171,15 +171,6 @@ h1:hover .hash-link, h2:hover .hash-link, h3:hover .hash-link, h4:hover .hash-li
   z-index: 100;
 }
 
-.nav-main:before, .nav-main:after {
-  content: " ";
-  display: table;
-}
-
-.nav-main:after {
-  clear: both;
-}
-
 .nav-main a {
   text-decoration: none;
   transition: color 0.1s ease-out
@@ -247,21 +238,27 @@ h1:hover .hash-link, h2:hover .hash-link, h3:hover .hash-link, h4:hover .hash-li
   background: #222;
   color: #f8f8f8;
   height: 80vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
   position: relative;
   z-index: 101;
   margin-top: -50px;
   padding-top: 50px;
+
+  .abs {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    clip: rect(0, auto, auto, 0);
+    overflow: hidden;
+  }
 }
 
 .nav-main.hero-nav {
-  position: absolute;
-  top: 0;
-  height: 50px;
-  width: 1020px;
   background: none;
   box-shadow: none;
 }

site/index.html.js

@@ -9,21 +9,23 @@ var index = React.createClass({
     return (
       <Site>
         <div className="hero">
-          <div className="hero-nav nav-main">
-            <div className="wrap">
-              <div className="algolia-search-wrapper">
-                <input id="algolia-doc-search" type="text" placeholder="Search docs..." />
+          <div className="abs">
+            <div className="hero-nav nav-main">
+              <div className="wrap">
+                <div className="algolia-search-wrapper">
+                  <input id="algolia-doc-search" type="text" placeholder="Search docs..." />
+                </div>
+                <HeaderLinks section={this.props.section} />
               </div>
-              <HeaderLinks section={this.props.section} />
             </div>
-          </div>
 
-          <div className="content">
-            <img className="main-logo" src={'/img/logo.svg'} width="240" height="240" />
-            <h1 className="text"><strong>GraphQL</strong></h1>
-            <h2 className="minitext">
-              {SiteData.description}
-            </h2>
+            <div className="content">
+              <img className="main-logo" src={'/img/logo.svg'} width="240" height="240" />
+              <h1 className="text"><strong>GraphQL</strong></h1>
+              <h2 className="minitext">
+                {SiteData.description}
+              </h2>
+            </div>
           </div>
         </div>