CODEWITHSUNDEEP
htmlcsstwitter-bootstrapdrop-down-menubootstrap-4
Majora320
Majora320

Reputation: 1351

Dropdown menu with the dropdown-menu-right class does not align to the right

I have the following navbar structure ({{ current_user.username }} is from my templating system): 

<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
    <!-- navbar items -->
</ul>
<div class="dropdown show">
    <a class="dropdown-toggle" style="color: inherit" href="#" id="dropdownLink" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
        <i class="fa fa-user" aria-hidden="true"></i>
        {{ current_user.username }}
    </a>
    <ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dropdownLink">
        <li><a class="dropdown-item" href="#">Profile</a></li>
        <!-- etc -->
    </ul>
</div>

The dropdown part is aligned to the right of the screen, but clicking on it displays the dropdown menu going off the right of the screen, which the dropdown-menu-right class is supposed to prevent. Any ideas?

Minimal Codepen: https://codepen.io/Majora320/pen/jGwNrE

Upvotes: 2

Views: 1216

Answers (1)

carinlynchin
carinlynchin

Reputation: 389

If you add the style 

right: 0

to 

 .dropdown-menu

style rule... it will do what you want.

Upvotes: 1

Related Questions