diff --git a/scss/ui/_slidenav.scss b/scss/ui/_slidenav.scss
index cff55f5f2..68372b9d9 100644
--- a/scss/ui/_slidenav.scss
+++ b/scss/ui/_slidenav.scss
@@ -2,7 +2,6 @@
   box-sizing: border-box;
   display: inline-block;
   line-height: 0;
-  overflow: hidden;
   position: relative;
   transition: height 0.3s;
 
@@ -10,7 +9,6 @@
     box-sizing: border-box;
     display: inline-block;
     left: 0;
-    overflow: hidden;
     position: relative;
     top: 0;
     transition: all 0.3s;
@@ -70,5 +68,7 @@
       opacity: 1;
       transform: none;
     }
+    
+    overflow: hidden
   }  
 }
diff --git a/scss/ui/helpers/_helpers.scss b/scss/ui/helpers/_helpers.scss
index d9f50058e..623e4b39c 100644
--- a/scss/ui/helpers/_helpers.scss
+++ b/scss/ui/helpers/_helpers.scss
@@ -64,6 +64,10 @@
   overflow-y: auto;
 }
 
+.overflow-unset {
+  overflow: unset;
+}
+
 // position
 .absolute {
   position: absolute;
diff --git a/src/controls/legend/group.js b/src/controls/legend/group.js
index e693435a0..52669bb53 100644
--- a/src/controls/legend/group.js
+++ b/src/controls/legend/group.js
@@ -112,7 +112,8 @@ const Group = function Group(viewer, options = {}) {
 
   const GroupHeader = function GroupHeader() {
     const headerComponent = CollapseHeader({
-      cls: 'hover padding-x padding-y-small grey-lightest border-bottom text-small',
+      cls: 'hover padding-x padding-y-small grey-lightest border-bottom text-small sticky bg-white z-index-low',
+      style: 'top: 0;',
       icon,
       title
     });
diff --git a/src/ui/slidenav.js b/src/ui/slidenav.js
index 3b2f26ce2..777afb536 100644
--- a/src/ui/slidenav.js
+++ b/src/ui/slidenav.js
@@ -132,7 +132,7 @@ export default function Slidenav(options = {}) {
     getState,
     onInit() {
       mainContainer = Element({
-        cls: 'main'
+        cls: 'main overflow-unset'
       });
       backButton = Button({
         cls: 'icon-small padding-small',