slide in menu is often not or only partially displayed in firefox browser

[BirkeHeeren]

slide in menu is often not or only partially displayed in firefox browser sometimes the slide in menu works and sometimes it does not

[hdcdstr8fwd]

Also having this problem, did you manage to fix this issue?

[kishaningithub]

Tried in firefox for mobile in iOS.. Unable to replicate this (screenshot below) But was able to replicate in responsive mode.. Looking into it...

[hdcdstr8fwd]

Having same problem in Firefox for Android. Works as expected In chrome however.

[hdcdstr8fwd]

Seems as though the position fixed sidebar-content css class is causing issues when viewed in certain browsers. I have disabled the following position and width rules and it seems to function as expected in Firefox.

[BirkeHeeren]

I made the position relative instead of fixed also (but only at small widths) http://www.weltladen-greifswald.de

[cristi8]

As other have mentioned, it looks like the position fixed with no left/top/right/bottom specification is causing the issues.

I kept the position fixed, while specifying top 40px and left 5px and using an opacity transition when the sidebar should be visible. Like this (i only patched the green style that I used):

--- a/site/themes/hugo-creative-portfolio-theme/static/css/style.green.css
+++ b/site/themes/hugo-creative-portfolio-theme/static/css/style.green.css
@@ -323,10 +323,12 @@ SIDEBAR + RIGHT COLUMN
 .sidebar-content {
     position: fixed;
     width: inherit;
     z-index: 0;
     padding: 0 1em 0 0.2em;
+    top: 40px;
+    left: 5px;
 }
 @media screen and (min-width: 992px) {
   .sidebar-content {
     padding-left: 20px;
     padding-right: 20px;
@@ -487,14 +489,22 @@ OFF-CANVAS SIDEBAR BEHAVIOUR
     left: 50%;
     /* 6 columns */
   }
   .sidebar-offcanvas {
     position: absolute;
+    -webkit-transition: all 0.25s ease-out;
+    -o-transition: all 0.25s ease-out;
+    transition: all 0.25s ease-out;
+    opacity: 0;
     top: 0;
     width: 50%;
     /* 6 columns */
   }
+
+  .row-offcanvas-left.active .sidebar-offcanvas {
+      opacity: 1;
+  }
 }
 /*
 =====================
 SERVICES / INTEGRATIONS
 =====================
@@ -2112,6 +2122,6 @@ a.list-group-item.active > .badge,
   color: #2b7551;
   background-color: #ffffff;
 }
 .nav-pills > li > a > .badge {
   margin-left: 3px;
-}
\ No newline at end of file
+}