convert navigation menu to dropdown on small screen

resources/www/_shared/styles/_main-menu.scss

@@ -19,6 +19,18 @@ $mainMenuBottomBorder: none !default;
   margin-bottom: $mainMenuMarginBottom;
   z-index: 100;
   box-sizing: border-box;
+  .show-menu {
+    display: none;
+    i {
+      font-size: 26px;
+      vertical-align: middle;
+      color: $mainMenuLinkActiveColor;
+    }
+    /*Show menu when invisible checkbox is checked*/
+    input[type=checkbox]:checked ~ #nav_menu {
+      display: block;
+    }
+  }
   ol {
     display: block;
     margin: 0;
@@ -96,3 +108,36 @@ $mainMenuBottomBorder: none !default;
     }
   }
 }
+
+@media screen and (max-width: 760px) {
+  #mainMenu {
+    .show-menu {
+      display: block;
+    }
+    #nav_menu {
+      display: none;
+      z-index: 1000;
+      ol {
+        position: static;
+      }
+      li.menu-bar-item {
+        width: 100%;
+        clear: both;
+        background: $mainMenuBackgroundColor;
+        border-bottom: 1px solid $mainMenuLinkActiveColor;
+        z-index: 1000;
+      }
+      li.menu-bar-item a {
+        width: 100%;
+        > span {
+          text-align: center;
+          font-size: 14px;
+          font-weight: bold;
+          &.selected {
+            border-top: none !important;
+          }
+        }
+      }
+    }
+  }
+}