1 files changed, 51 insertions, 16 deletions
diff --git a/js/src/dropdown.js b/js/src/dropdown.js
index 4ed0210a5..9a4beae63 100644
--- a/js/src/dropdown.js
+++ b/js/src/dropdown.js
@@ -96,10 +96,11 @@ const Dropdown = (($) => {
   class Dropdown {
 
     constructor(element, config) {
-      this._element = element
-      this._popper  = null
-      this._config = this._getConfig(config)
-      this._menu = this._getMenuElement()
+      this._element  = element
+      this._popper   = null
+      this._config   = this._getConfig(config)
+      this._menu     = this._getMenuElement()
+      this._inNavbar = this._detectNavbar()
 
       this._addEventListeners()
     }
@@ -153,17 +154,7 @@ const Dropdown = (($) => {
           element = parent
         }
       }
-      this._popper = new Popper(element, this._menu, {
-        placement : this._getPlacement(),
-        modifiers : {
-          offset : {
-            offset : this._config.offset
-          },
-          flip : {
-            enabled : this._config.flip
-          }
-        }
-      })
+      this._popper = new Popper(element, this._menu, this._getPopperConfig())
 
       // if this is a touch-enabled device we add extra
       // empty mouseover listeners to the body's immediate children;
@@ -253,10 +244,54 @@ const Dropdown = (($) => {
       } else if ($(this._menu).hasClass(ClassName.MENURIGHT)) {
         placement = AttachmentMap.BOTTOMEND
       }
-
       return placement
     }
 
+    _detectNavbar() {
+      return $(this._element).closest('.navbar').length > 0
+    }
+
+    _navbarPositioning() {
+      const $parentNavbar = $(this._element).closest('.navbar')
+      if ($(this._menu).hasClass(ClassName.MENURIGHT)) {
+        if (!$parentNavbar.hasClass('navbar-expand')) {
+          return {
+            position: 'static',
+            transform: '',
+            float: 'none'
+          }
+        }
+      }
+
+      return {}
+    }
+
+    _getPopperConfig() {
+      const popperConfig = {
+        placement : this._getPlacement(),
+        modifiers : {
+          offset : {
+            offset : this._config.offset
+          },
+          flip : {
+            enabled : this._config.flip
+          }
+        }
+      }
+
+      if (this._inNavbar) {
+        popperConfig.modifiers.AfterApplyStyle = {
+          enabled: true,
+          order: 901, // ApplyStyle order + 1
+          fn: () => {
+            // reset Popper styles
+            $(this._menu).attr('style', '')
+          }
+        }
+      }
+      return popperConfig
+    }
+
     // static
 
     static _jQueryInterface(config) {