Reset Popper.js styles for Dropdowns in navbar

1 files changed, 19 insertions, 4 deletions

diff --git a/scss/_navbar.scss b/scss/_navbar.scss
index 59cc52d9a..1803a82b4 100644
--- a/scss/_navbar.scss
+++ b/scss/_navbar.scss
@@ -77,9 +77,8 @@
   }
 
   .dropdown-menu {
-    position: static !important;
+    position: static;
     float: none;
-    transform: unset !important;
   }
 }
 
@@ -142,6 +141,13 @@
 
     &#{$infix} {
       @include media-breakpoint-down($breakpoint) {
+        .navbar-nav {
+          .dropdown-menu {
+            position: static;
+            float: none;
+          }
+        }
+
         > .container,
         > .container-fluid {
           padding-right: 0;
@@ -158,8 +164,17 @@
           flex-direction: row;
 
           .dropdown-menu {
-            position: absolute !important;
-            top: 100% !important;
+            position: absolute;
+          }
+
+          .dropdown-menu-right {
+            right: 0;
+            left: auto; // Reset the default from `.dropdown-menu`
+          }
+
+          .dropdown-menu-left {
+            right: auto;
+            left: 0;
           }
 
           .nav-link {