From 165f6933a69ba328fe0b56e330d8b328e6a9d1b6 Mon Sep 17 00:00:00 2001
From: alexwolfe <thewolfe@gmail.com>
Date: Fri, 22 Apr 2016 14:25:55 -0700
Subject: [PATCH] Fixed shifting content on page load

Fixed shifting content when going from page to page in docs.
---
 public/_includes/_hero.jade                | 25 +++++++++++-----------
 public/_includes/_version-dropdown.jade    |  2 +-
 public/resources/css/module/_dropdown.scss |  1 +
 public/resources/css/module/_main-nav.scss |  6 ++++--
 4 files changed, 18 insertions(+), 16 deletions(-)

diff --git a/public/_includes/_hero.jade b/public/_includes/_hero.jade
index cddbb5e5e3..26c4ddd46b 100644
--- a/public/_includes/_hero.jade
+++ b/public/_includes/_hero.jade
@@ -3,23 +3,22 @@
 - var headerTitle = title + (typeof varType !== 'undefined' ? (': ' + varType) : '');
 - var capitalize = function capitalize(str) { return str.charAt(0).toUpperCase() + str.slice(1); }
 - var useBadges = docType || stability;
-  
+
 if current.path[4] && current.path[3] == 'api'
   - var textFormat = 'is-standard-case'
 
 header(class="hero background-sky")
-  span(class="hero-title-with-badges" layout="row" layout-xs="column" layout-align="start center" layout-align-xs="start start")
-    h1(class="hero-title text-display-1 #{textFormat}") #{headerTitle}
-    if useBadges
-      span(class="badges")
-        if docType
-          span(class="status-badge").
-            #{capitalize(docType)}
-        if stability
-          span(layout="row" class="status-badge")
-            // badge circle is filled based on stability by matching a css selector in _hero.scss
-            span(class="status-circle status-#{stability}")
-            span Stability: #{capitalize(stability)}
+  h1(class="hero-title text-display-1 #{textFormat}") #{headerTitle}
+  if useBadges
+    span(class="badges")
+      if docType
+        span(class="status-badge").
+          #{capitalize(docType)}
+      if stability
+        span(layout="row" class="status-badge")
+          // badge circle is filled based on stability by matching a css selector in _hero.scss
+          span(class="status-circle status-#{stability}")
+          span Stability: #{capitalize(stability)}
 
   if subtitle
     h2.hero-subtitle.text-subhead #{subtitle}
diff --git a/public/_includes/_version-dropdown.jade b/public/_includes/_version-dropdown.jade
index 2aea294f62..6bba60975a 100644
--- a/public/_includes/_version-dropdown.jade
+++ b/public/_includes/_version-dropdown.jade
@@ -64,7 +64,7 @@ if language == 'dart'
 
 
 <!-- DROPDOWN BUTTON -->
-nav.hero-subtitle.text-subhead.dropdown
+nav.dropdown
   button(aria-label="Select a version of Angular" md-button class="dropdown-button" ng-click="appCtrl.toggleVersionMenu($event)") #{title}  <span class="icon icon-arrow-drop-down"></span>
   div(class="overlay ng-hide" ng-click="appCtrl.toggleVersionMenu($event)" ng-show="appCtrl.showMenu")
 
diff --git a/public/resources/css/module/_dropdown.scss b/public/resources/css/module/_dropdown.scss
index 6ea5991f80..65d9197dc9 100644
--- a/public/resources/css/module/_dropdown.scss
+++ b/public/resources/css/module/_dropdown.scss
@@ -1,6 +1,7 @@
 .dropdown {
   position: relative;
   z-index: $layer-1;
+  margin: ($unit * 2) 0 0 0;
 
   .dropdown-button {
     background: rgba($snow, .1);
diff --git a/public/resources/css/module/_main-nav.scss b/public/resources/css/module/_main-nav.scss
index abea78c15f..df25e277a9 100644
--- a/public/resources/css/module/_main-nav.scss
+++ b/public/resources/css/module/_main-nav.scss
@@ -34,8 +34,8 @@
       width: 135px;
       overflow: hidden;
       text-indent: -3000px;
-      margin-top: 0;
-      margin-bottom: 0;
+      margin:0;
+      padding: 0;
 
       @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
         background: url('/resources/images/logos/standard/logo-nav@2x.png') 0px 8px no-repeat;
@@ -111,7 +111,9 @@
     background: none;
     border-radius: 0;
     position: relative;
+    letter-spacing: 0.16px;
     margin: 0;
+    min-width: auto;
 
     &:hover {
       background: $ocean;