Merge pull request #1341 from hashicorp/site-header-fix

fix for jumping header issues on the website

website/source/assets/stylesheets/_home.scss

@@ -10,6 +10,8 @@ body.page-home{
 	padding: 130px 0 0 0;
 	background: #f8f8f8 image-url('hero-dots-below@2x.png') center top no-repeat;
 	background-size: 1280px 49px;
+  position: relative;
+  top: $negative-hero-margin;
 
 	.double-row{
 		padding: 0 0 50px 0;
@@ -158,6 +160,7 @@ body.page-home{
 
 @media (max-width: 992px) {
 	#features{
+    top: $large-negative-hero-margin;
 		.double-row{
 			padding: 0 0 0 0;
 			.row{
@@ -412,4 +415,8 @@ body.page-home{
 	}
 }
 
-
+@media (max-width: 480px) {
+  #features {
+    top: $negative-hero-margin;
+  }
+}

website/source/assets/stylesheets/_jumbotron.scss

@@ -2,11 +2,20 @@
 // Jumbotron
 // --------------------------------------------------
 
-#jumbotron-mask{
+#jumbotron-mask,
+#jumbotron-mask-dummy{
   overflow: hidden;
   width: 100%;
   height: $jumbotron-total-height;
-  margin-top: $negative-hero-margin;
+}
+#jumbotron-mask {
+  position: absolute;
+  top: 0;
+}
+#jumbotron-mask-dummy{
+  visibility: hidden;
+  position:relative;
+  top: $negative-hero-margin;
 }
 
 #jumbotron {
@@ -42,7 +51,7 @@
       height: 100%;
       margin-top: $header-height;
       -webkit-backface-visibility:hidden;
-      
+
       .jumbo-logo-wrap{
         margin-top: 135px;
 
@@ -72,6 +81,9 @@
       margin-left: 0;
     }
   }
+  #jumbotron-mask-dummy{
+    top: $large-negative-hero-margin;
+  }
 }
 
 @media (max-width: 480px) {

website/source/assets/stylesheets/_variables.scss

@@ -13,6 +13,7 @@ $jumbotron-color:  			#fff;
 $btn-border-radius:   		4px;
 $el-border-radius:   		6px;
 $negative-hero-margin: 		-93px;
+$large-negative-hero-margin: 		-154px;
 // colors
 // -------------------------
 

website/source/index.html.erb

@@ -21,6 +21,25 @@ description: Service discovery and configuration made easy. Distributed, highly
 			<div class="jumbotron-dots"></div>
 	</div>
 </div>
+<!-- Make sure that any changes made to jumbotron are reproduced here as this takes up the space in the layout -->
+<div id="jumbotron-mask-dummy" aria-hidden="true">
+	<div id="jumbotron">
+			<div class="container">
+				<div class="col-lg-6 col-md-6">
+					<h2 class="rls-l">
+					Service discovery and configuration made easy.
+					Distributed, highly available, and
+					datacenter-aware.
+					</h2>
+				</div>
+				<div class="jumbo-logo-wrap col-lg-offset-1 col-lg-5 col-md-6 hidden-xs hidden-sm">
+					<div class="jumbo-logo"></div>
+				</div>
+				<!-- <p><a class="btn btn-primary btn-lg">Learn more &raquo;</a></p> -->
+			</div>
+			<div class="jumbotron-dots"></div>
+	</div>
+</div>
 
 <div id="features">
 	<div class="container">