header fixes

app/components/page-header-environment/template.hbs

@@ -1,12 +1,12 @@
 {{#if project}}
-  <div class="dropdown btn-group project-btn {{if hasKubernetes 'alt'}}">
-    <a role="button" class="btn btn-link dropdown-toggle text-left" href="#" aria-haspopup="true" aria-expanded="false" aria-label="{{t 'nav.environment.label'}}">
+  <button class="btn dropdown project-btn r-p10 {{if hasKubernetes 'alt'}}">
+    <a role="button" class="btn btn-link dropdown-toggle r-p0" href="#" aria-haspopup="true" aria-expanded="false" aria-label="{{t 'nav.environment.label'}}">
+      <label>{{t 'nav.environment.label'}}</label>
       <span class="clip">
         <i class="{{project.icon}} project-icon icon-fw"></i>&nbsp;{{project.displayName}}
       </span>
       <i class="icon icon-chevron-down project-chevron"></i>
       <span class="sr-only">{{t 'nav.srToggleDropdown'}}</span>
-      <label>{{t 'nav.environment.label'}}</label>
     </a>
     <ul class="dropdown-menu dropdown-menu-right project-menu" role="menu" data-dropdown-id="enviroment">
       {{#if projectChoices.length}}
@@ -43,18 +43,18 @@
       {{/if}}
       <li>{{#link-to "settings.projects"}}{{t 'nav.environment.manage'}}{{/link-to}}</li>
     </ul>
-  </div>
+  </button>
 {{/if}}
 
 {{#if (and hasKubernetes k8s.namespace)}}
-  <div class="dropdown btn-group project-btn kub-btn">
-    <a role="button" class="btn btn-link dropdown-toggle text-left clip" href="#" aria-haspopup="true" aria-expanded="false" aria-label="{{t 'nav.namespace.label'}}">
-      <span class="clip">
-        <i class="icon icon-folder-open icon-fw"></i>&nbsp;{{k8s.namespace.displayName}}
-      </span>
-      <i class="icon icon-chevron-down"></i>
-      <span class="sr-only">{{nav.srToggleDropdown}}</span>
+  <button class="dropdown btn project-btn kub-btn r-p10">
+    <a role="button" class="btn btn-link dropdown-toggle text-left r-p0" href="#" aria-haspopup="true" aria-expanded="false" aria-label="{{t 'nav.namespace.label'}}">
       <label>{{t 'nav.namespace.label'}}</label>
+      <span class="clip">
+        <i class="icon icon-folder-open icon-fw project-icon"></i>&nbsp;{{k8s.namespace.displayName}}
+      </span>
+      <i class="icon icon-chevron-down project-chevron"></i>
+      <span class="sr-only">{{nav.srToggleDropdown}}</span>
     </a>
     <ul class="dropdown-menu dropdown-menu-right project-menu" role="menu" data-dropdown-id="namespace">
       {{#if k8s.namespaces.length}}
@@ -86,5 +86,5 @@
       {{/if}}
       <li>{{#link-to "k8s-tab.namespaces"}}{{t 'nav.namespace.manage'}}{{/link-to}}</li>
     </ul>
-  </div>
+  </button>
 {{/if}}

app/components/page-header/template.hbs

@@ -5,12 +5,14 @@
         <span class="sr-only">{{t 'nav.srToggleNav'}}</span>
         <i class="icon icon-ellipsis"></i>
       </a>
-      <a class="navbar-brand logo"></a>
-      {{page-header-environment
-        currentPath=currentPath
-        switchProject="switchProject"
-        switchNamespace="switchNamespace"
-      }}
+      <div class="btn-group">
+        <button class="navbar-brand logo btn"></button>
+        {{page-header-environment
+          currentPath=currentPath
+          switchProject="switchProject"
+          switchNamespace="switchNamespace"
+        }}
+      </div>
     </div>
     <div id="navbar" class="navbar-collapse collapse">
       <ul class="nav navbar-nav">
@@ -93,3 +95,4 @@
     </div>
   </div>
 </nav>
+<div class="clearfix"></div>

app/styles/layout/_header.scss

@@ -83,6 +83,25 @@ HEADER {
     padding: 0;
     font-size : 14px;
 
+    .navbar-nav {
+      margin-left: -4px;
+    }
+
+    & .navbar-header {
+      margin-left: -15px;
+
+      .btn-group {
+        > .btn {
+          margin-left: -5px;
+        }
+      }
+    }
+
+    .navbar-brand {
+      margin: 0!important;
+      float: none;
+    }
+
     .navbar-toggle {
       padding: 11px;
       margin: 0;
@@ -97,7 +116,7 @@ HEADER {
         border-width: 8px;
         border-right-color: $logo-bg;
         position: absolute;
-        left: -15px;
+        // left: -15px;
         top: 12px;
       }
     }
@@ -250,7 +269,17 @@ HEADER {
       color: white;
       background: $project-btn;
       position: relative;
+      float: none;
 
+      label {
+        visibility: hidden;
+      }
+
+      &:hover {
+        label {
+          visibility: visible;
+        }
+      }
       span {
         color: white;
       }
@@ -287,11 +316,10 @@ HEADER {
 
       .btn {
         text-transform: inherit;
-        padding: 0 10px;
+        position: relative;
 
         &.dropdown-toggle {
           line-height: inherit !important;
-          height: 45px !important;
 
             &:focus {
               outline: -webkit-focus-ring-color auto 5px !important;
@@ -299,11 +327,6 @@ HEADER {
 
         }
 
-        & * {
-        display: inline-block;
-        vertical-align: middle;
-        }
-
         .clip {
           max-width: 155px;
         }
@@ -324,6 +347,8 @@ HEADER {
           font-size: 11px;
           display: block;
           margin: 0;
+          top: -12px;
+          position: absolute;
         }
       }
     }

app/styles/vendors/_bootstrap-tweak.scss

@@ -587,7 +587,7 @@ HR {
   text-transform: none;
   padding: 0;
   margin: 0;
-  // color: $input-color;
+
   &.dropdown-menu-right {
     left: auto;
     right: auto;