Enhances the mobile header/menu layout (#663)

build/xslt/fsfe_pageheader.xsl

@@ -20,8 +20,6 @@
           <xsl:element name="a">
             <xsl:attribute name="href">#menu-list</xsl:attribute>
             <xsl:attribute name="id">direct-to-menu-list</xsl:attribute>
-            <xsl:attribute name="data-toggle">collapse</xsl:attribute>
-            <xsl:attribute name="data-target">#menu-list</xsl:attribute>
             <xsl:element name="i">
               <xsl:attribute name="class">fa fa-bars fa-lg</xsl:attribute>
             </xsl:element>

look/style.less

@@ -152,7 +152,7 @@ div#subpages, .grid-row {
 }
 
 #menu {
-    @media (min-width: @screen-xs) {
+    @media (min-width: @screen-sm) {
         .pull-right;
         text-align: right;
     }
@@ -176,7 +176,7 @@ div#subpages, .grid-row {
         }
     }
 
-    @media (min-width: @screen-xs) {
+    @media (min-width: @screen-sm) {
         #direct-to-menu-list {
             visibility: hidden;
             display: none;
@@ -954,7 +954,7 @@ div#subpages, .grid-row {
         margin: 1em 0 0;
 
         li {
-            .make-xs-column(6);
+            .make-xs-column(12);
             .make-sm-column(4);
             .make-md-column(2);
             margin-top: 1em;

scripts/bootstrap-3.0.3.custom.js

@@ -335,3 +335,23 @@
   })
 
 }(jQuery);
+
+/**
+ * FSFE custom slide toggle for the mobile menu.
+ */
+$(document).ready(function() {
+    if ($(window).width() < 768) {
+        $('#menu-list').hide();
+    }
+
+    $('#direct-to-menu-list').on('click', function(e) {
+        e.preventDefault();
+        $('#menu-list').stop(true, true).slideToggle();
+    });
+
+    $(window).on('resize', function() {
+        if ($(window).width() >= 768) {
+            $('#menu-list').show();
+        }
+    });
+});