Merge pull request #2283 from alphagov/make-mobile-menu-toggle-a-button

Make mobile menu toggle a button
alphagov · Sep 24, 2020 · b8a30e4 · b8a30e4
2 parents 5e14d15 + 6a336c8
commit b8a30e4
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 1 deletion.
diff --git a/app/assets/stylesheets/helpers/_header.scss b/app/assets/stylesheets/helpers/_header.scss
@@ -269,6 +269,36 @@
     }
   }
 
+  .mobile-menu-toggle {
+    @include govuk-font(16);
+    float: right;
+    padding: 6px 0 4px 0;
+    color: govuk-colour("white");
+    background: none;
+    border: 0;
+
+    @include govuk-media-query($from: tablet) {
+      display: none;
+    }
+
+    &:focus {
+      @include govuk-focused-text;
+    }
+
+    &:after {
+      display: inline-block;
+      font-size: 8px;
+      height: 8px;
+      padding-left: 5px;
+      vertical-align: middle;
+      content: " \25BC";
+    }
+
+    &.js-visible:after {
+      content: " \25B2";
+    }
+  }
+
   .header-proposition {
     a {
       &.menu {

diff --git a/app/views/root/proposition_menu.html.erb b/app/views/root/proposition_menu.html.erb
@@ -1,5 +1,5 @@
 <div class="header-proposition">
   <div class="content">
-    <a href="#proposition-links" class="js-header-toggle menu">Menu</a>
+    <button data-search-toggle-for="proposition-links" class="js-header-toggle mobile-menu-toggle">Menu</button>
   </div>
 </div>