Dropdown box expands within navbar - html

Question

I Wanted to have a navbar that doesn't collapse in any device , I used Bootstrap but when i try to open expand dropdowm listbox below 768px it expands within navbar. and looks ugly , Eventhough i used sm class its not working properly and collapses in md
HTML
<nav class="navbar navbar-expand-sm navbar-light bg-light fixed-top">
<div class="container">
<a class="navbar-brand" routerLink="/"><i class="fa fa-leaf" aria-hidden="true"></i> NAV BRAND</a>
<div id="navbarSupportedContent">
<ul class="navbar-nav mr-auto pull-left pull-top ">
<li class="nav-item active">
<a class="nav-link" routerLink="/shopping-cart" routerLinkActive="active" style="margin-right:10px">
<i class="fas fa-shopping-cart"></i>
<span class="badge badge-warning badge-pill"
*ngIf="cart$ | async as cart">
{{ cart.totalItemsCount }}
</span>
</a>
</li>
</ul>
<ul class="navbar-nav">
<li
*ngIf="appUser; else anonymousUser"
ngbDropdown
class="nav-item dropdown"
>
<a
ngbDropdownToggle
class="nav-link dropdown-toggle"
id="dropdown01"
button class="btn btn-primary"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>{{ appUser.name }}</a>
<div
ngbDropdownMenu
class="dropdown-menu"
aria-labelledby="dropdown01">
<a class="dropdown-item" routerLink="/my/orders">My Orders</a>
<ng-container *ngIf="appUser.isAdmin">
<a class="dropdown-item" routerLink="/admin/orders"
>Manage Orders</a>
<a class="dropdown-item" routerLink="/admin/products"
>Manage Products
</a>
</ng-container>
<a class="dropdown-item" (click)="logout()">Logout</a>
</div>
</li>
<ng-template #anonymousUser>
<li class="nav-item">
<a class="nav-link" button class="btn btn-primary" (click)="login()">Login</a>
</li>
</ng-template>
</ul>
</div>
</div>
</nav>
CSS
#media only screen and (max-width: 400px) {
.navbar-brand{
margin:0;
font-size:15px;
}
.nav-link{
font-size:12px;
}
.btn-primary{
font-size:12px;
margin:0;
}
.dropdown-menu{
min-width: 10px !important;
}
}

Answer 1

I am not sure but i think class and id only support 3 different styles to be used at the same time, you have passed trough 5, so now u need to check five diffent styles to see if position: fixed; is in one of them or is overriding it. and i am not seeing any javascript....