I am currently working on a navigation bar using Bootstrap4 and I've added a nav-item button to dropdown a menu. However, the issue I'm facing is that when the menu drops down, it pushes other nav-items around, causing them to change position. The code snippet below illustrates this horizontal pushing effect on the last item. But in my actual site, where there are more nav-items, the dropdown also results in vertical movement of other items.
Furthermore, when I add the class dropdown-toggle to the button, I end up with an unsightly expand_more text next to the button.
What could be wrong with the code below?
<nav class="navbar navbar-inverse fixed-top">
<ul class="nav navbar-nav bd-navbar-nav flex-row">
<li id="ncx1" class="nav-item">
item1
</li>
<li id="ncx1" class="nav-item">
item2
</li>
<li id="nvps0add" class="nav-item ml-3">
<div class="dropdown"
id="add_dropdown"
>
<button type="button" class="btn border-0"
role="button"
data-toggle="dropdown"
style="padding:0; background: transparent;"
aria-haspopup="true" aria-expanded="false"
>
dropdown
</button>
<div class="dropdown-menu dropdown-menu-right"
aria-labelledby="add_dropdown"
>
<a class="dropdown-item" href="#">
dropitem1
</a>
<a class="dropdown-item" href="#">
dropitem2
</a>
</div>
</div>
</li>
<li id="nvps0delete" class="nav-item ml-3">
item3
</li>
</ul>
</nav>