diff --git a/app/controllers/top.coffee b/app/controllers/top.coffee
index b71beef0..196b6df7 100644
--- a/app/controllers/top.coffee
+++ b/app/controllers/top.coffee
@@ -12,4 +12,9 @@ Controller = Ember.Controller.extend
     "#{location.protocol}//www.gravatar.com/avatar/#{@get('user.gravatarId')}?s=48&d=mm"
   ).property('user.gravatarId')
 
+  actions: {
+    toggleBurgerMenu: ->
+      @toggleProperty('is-open')
+  }
+
 `export default Controller`
diff --git a/app/styles/app/top.sass b/app/styles/app/top.sass
index a830aeca..3904a624 100644
--- a/app/styles/app/top.sass
+++ b/app/styles/app/top.sass
@@ -2,8 +2,6 @@
 #top
   font-size: $font-size-normal
   background  : $topbar-bg
-  height: 55px
-  overflow: hidden
 
   #logo
     position: relative
@@ -21,6 +19,12 @@
     @include resetul
     line-height: 30px
 
+  #navigation
+    height: 0
+    overflow: hidden
+    &.is-open
+      height: auto
+
   a, span
     color: $white
     text-decoration: none
@@ -47,6 +51,11 @@
 
   @media #{$medium-up}
     overflow: visible
+    height: 55px
+
+    #navigation
+      height: auto
+      overflow: visible
     ul
       line-height: 55px
       position: relative
@@ -76,13 +85,12 @@
     &:hover
       cursor: pointer
 
-
-  &.is-open
-    height: auto
-
   .menu
     position: relative
 
+    &.signed-out
+      ul
+        display: none
     .handle
       margin: 0
 
diff --git a/app/templates/top.hbs b/app/templates/top.hbs
index cd49aca9..dcd73aa1 100644
--- a/app/templates/top.hbs
+++ b/app/templates/top.hbs
@@ -5,10 +5,10 @@
 {{/link-to}}
 
 <div class="nav-burger">
-  <button type="button" id="burger">&equiv;</button>
+  <button type="button" id="burger" {{action 'toggleBurgerMenu'}}>&equiv;</button>
 </div>
 
-<ul id="navigation">
+<ul id="navigation" {{bind-attr class="is-open"}}>
   <li class="home">
     {{#link-to "main"}}Home{{/link-to}}
   </li>