Merge pull request #524 from rubymonsters/km-fix-hamburger-icon

Fix hamburger menu * rubymonsters/km-fix-hamburger-icon: fix hamburger menu
rubymonsters · Oct 29, 2019 · 6b098ea · 6b098ea
2 parents d8322b1 + edf53e2
commit 6b098ea
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 10 deletions.
diff --git a/app/assets/stylesheets/top.sass b/app/assets/stylesheets/top.sass
@@ -57,24 +57,20 @@
   @media (min-width: $medium)
     display: none
 
-.bar1, .bar2, .bar3
-  width: 15px
+.bar1, .bar2
+  width: 24px
   height: 2px
   background-color: #333
   margin: 4px 0
   transition: 0.4s
 
 /* Rotate first bar */
 .change .bar1
-  transform: rotate(-45deg) translate(-4px, 4px)
-
-/* Fade out the second bar */
-.change .bar2
-  opacity: 0
+  transform: rotate(-45deg) translate(-2px, 2px)
 
 /* Rotate last bar */
-.change .bar3
-  transform: rotate(45deg) translate(-4px, -4px)
+.change .bar2
+  transform: rotate(45deg) translate(-2px, -2px)
 
 .language-picker
   font-size: 15px

diff --git a/app/views/layouts/_header.html.erb b/app/views/layouts/_header.html.erb
@@ -38,7 +38,6 @@
     <div class="menu-button" onclick="toggleMenu(this)">
       <div class="bar1"></div>
       <div class="bar2"></div>
-      <div class="bar3"></div>
     </div>
 
     <div class="language-picker" id="languagePicker" onclick="toggleLanguagePicker()">