CODEWITHSUNDEEP
bootstrap-4twitter-bootstrap-4twitter-bootstrap-4-beta
MBaas
MBaas

Reputation: 7540

How to right-align drop-down menu in nav?

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>

Upvotes: 0

Views: 936

Answers (1)

gil.fernandes
gil.fernandes

Reputation: 14641

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
}

Upvotes: 2

Related Questions