_theme.scss in bootstrap-bookingsync-sass-0.0.15

- old
+ new

@@ -46,23 +46,32 @@
   overflow: hidden;
   z-index: 9000;
   transition: width 0.2s cubic-bezier(.4,0,.2,1);
   border-radius: 0;
 
-  &:hover {
-    width: 230px;
+  .body {
+    overflow: hidden;
+  }
 
-    .body {
+  @media (max-width: $screen-xs-max) {
+    .body,
+    .menu-dropdown ol,
+    .menu-dropright {
       overflow-y: auto;
+      -webkit-overflow-scrolling: touch;
     }
+  }
 
-    .menu-dropdown ol {
-      overflow-y: auto;
-    }
 
+  &:hover {
+    width: 230px;
+
+    .body,
+    .menu-dropdown ol,
     .menu-dropright {
       overflow-y: auto;
+      -webkit-overflow-scrolling: touch;
     }
   }
 
   header,
   footer {
@@ -96,11 +105,12 @@
   }
 
   header {
     background-color: $menu-header-bg;
     color: $menu-header-color;
-    position: relative;
+    z-index: 1000;
+    position: static;
 
     a {
       color: $menu-header-link-color;
     }
 
@@ -108,12 +118,11 @@
       margin-bottom: 0;
       border-top: 1px solid $menu-header-link-hover-bg;
       background-color: $menu-header-bg;
       width: 100%;
       position: absolute;
-      z-index: 1000;
-      max-height: 100vh;
+      max-height: 100%;
       overflow: hidden;
 
       a:hover {
         background-color: $menu-header-link-hover-bg;
         color: $menu-header-link-hover-color;
@@ -128,10 +137,15 @@
     #menu-header-submenu {
       width: 100%;
 
       &.open {
         top: $menu-header-height;
+        bottom: 0;
+        @media (max-width: $screen-xs-max) {
+          position: fixed;
+          top: $menu-header-height + $navbar-height;
+        }
       }
     }
   }
 
   footer {
@@ -192,13 +206,9 @@
 
     i {
       width: 16px;
       height: 16px;
     }
-  }
-
-  .body {
-    overflow: hidden;
   }
 
   .body,
   footer {
     li {