0

I am trying to add a dropdown-menu to a navbar - but while the icon is right-aligned, the menu opens left-aligned, despite me using dropdown-menu-right. I saw a remark about poppr being used for positioning - except in nav. So how can I right-align the menu then?

Fiddle here: https://jsfiddle.net/mbaas/dk3tpeex/5/

<nav id="TOP" class="navbar navbar-light d-flex">
  <div class="navbar-brand d-inline">BLA</div>
  <div data-toggle="dropdown" class="navbar-brand d-inline ml-auto" id="menu" aria-expanded="false"><span class="fa fa-bars"></span></div>
  <div class="dropdown-menu dropdown-menu-right" aria-labelledby="menu">
    <button onclick="javascript:alert('Hi!');" class="dropdown-item" type="button" id="toggleLeft">MenuItem</button>
  </div>
</nav>
MBaas
  • 7,248
  • 6
  • 44
  • 61

1 Answers1

2

In this specific case I would change the following attributes of the dropdown-menu class:

.dropdown-menu {
    left: initial;
    right: 0; /* add right with 0 or a low pixel value */
}

You could follow also the approach of creating your own class and override the original attributes of this dropdown-menu class.

Here is another suggestion how to right align the menu:

#dd.dropdown-menu {
    left: initial;
    right: 0
}
gil.fernandes
  • 12,978
  • 5
  • 63
  • 76
  • In order not to affect all other dropdown-menus, I decided to overwrite it by referring to the id of the control. That didn't work. But I can not remove the .dropdown-menu-Class, it also used to hide the `div`. So what would u recommend to do? Updated fiddle: https://jsfiddle.net/mbaas/or39p0fp/2/ – MBaas Nov 17 '17 at 17:55
  • 2
    I have updated the fiddle (https://jsfiddle.net/or39p0fp/4/) so that the menu is right aligned. The relevant css piece is in the updated answer. – gil.fernandes Nov 17 '17 at 18:03