bootstrap 4 раскрывающееся меню выпадающего элемента navbar, показывающее элементы nav (элемент navbar)

Question

Как видно из названия, моя bootstrap 4 navbar содержит выпадающее меню. Проблема заключается в том, что при использовании раскрывающегося меню на смартфоне раскрывающиеся элементы отображаются в виде навигационных элементов, например: - снимок экрана

код: -

<nav class="navbar navbar-expand-sm navbar-dark navbar">
        <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
        <li class="nav-item dropdown">
                <a class="nav-link notifications" href="#" id="dropdownId" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <div style="font-size: 12px;"><i class="fa fa-bell fa-3x bell" aria-hidden="true"></i><span class="badge badge-notify" style="font-size:15px;">5</span></div></a>
                <div class="dropdown-menu" aria-labelledby="dropdownId">
                    <a class="dropdown-item" href="#">You Get 2 Awards</a>
                    <a class="dropdown-item" href="#">You Loged in since 42sec</a>
                </div>
            </li>
        </ul>
        <ul class="navbar-nav ml-auto mt-2 mt-lg-0">
        <li class="nav-item">
                <a class="nav-link" href="#">
                    <div style="font-size: 16px;">
                    <i class="fa fa-cart-arrow-down fa-3x" aria-hidden="true"></i><span class="badge badge-sucss" style="font-size:15px;">5</span></a>
                    </div>
            </li>
        </ul>
</nav>