some topbar refactoring

app/styles/app/layouts/top.sass

@@ -15,10 +15,8 @@ $top-height: 55px
 
   p
     position: relative
-    margin-top: 0
+    margin: 0
-    margin-bottom: 0
+    padding: 0
-    padding-top: 0
-    padding-bottom: 0
 
   .arrow
     display: block
@@ -69,27 +67,18 @@ $top-height: 55px
     &:hover
       cursor: pointer
 
-
 .topbar
   font-size: $font-size-m
   background-color: #eff0ec
   color: $grey1
 
-  a
+  .navigation
-    display: block
+    height: 0
-    color: #898989
+    overflow: hidden
-    border-bottom: solid 1px #eff0ec
+    &.is-open
-    padding: 0 .2em
+      height: auto
-    font-size: $font-size-m
+    a
-
+      padding: .5em 1em
-  @media #{$small-only}
-    .navigation
-      height: 0
-      overflow: hidden
-      &.is-open
-        height: auto
-      a
-        padding: .5em 1em
 
   .navigation,
   .navigation-nested
@@ -99,6 +88,22 @@ $top-height: 55px
     position: relative
     margin: 0
 
+  .navigation-sub
+    position: relative
+
+  a,
+  .navigation-handle span
+    display: block
+    color: #898989
+    border-bottom: solid 1px #eff0ec
+    font-size: $font-size-m
+    cursor: pointer
+    height: $top-height
+    line-height: $top-height + 2px
+    border: none
+    &:hover
+      text-decoration: underline
+
   .navigation--profile
     img
       border-radius: 50%;
@@ -107,14 +112,12 @@ $top-height: 55px
       margin-left: 1rem;
       transform: translateY(-0.1rem);
 
-  .navigation-sub
-    position: relative
-
   @media #{$medium-up}
     height: $top-height
 
     .navigation
       height: $top-height
+      overflow: visible
       > li
         display: inline-block
         margin-right: 1rem
@@ -122,12 +125,10 @@ $top-height: 55px
       .centered & li.signed-in
       .centered & li.signing-in
         margin-right: 0
-      a
+
-        height: $top-height
+      a,
-        line-height: $top-height + 2px
+      .navigation-handle span
-        border: none
+        padding: 0 .2em
-        &:hover
-          text-decoration: underline
 
     .navigation--profile
       float: right

app/templates/top.hbs

@@ -11,7 +11,7 @@
 
     <li class="navigation-sub navigation--community">
       <p class="handle navigation-handle">
-        <a href="#">Help</a>
+        <span>Help</span>
       </p>
       <ul class="navigation-nested">
         <li><a href="http://docs.travis-ci.com">Docs</a></li>
@@ -25,7 +25,7 @@
     {{#if config.pro}}
       <li class="navigation-sub navigation--legal">
         <p class="handle navigation-handle">
-          <a>Legal</a>
+          <span>Legal</span>
         </p>
         <ul class="navigation-nested">
           <li>