Utilizing the bootstrap dropdown feature in the navigation bar with a menu (represented by three dots) icon https://i.sstatic.net/vR13Z.png
However, the issue arises on mobile devices. When I open the navigation bar and click on the menu button, the dropdown menu appears below, taking up space instead of overlaying the content. Refer to the image below:
https://i.sstatic.net/BgsuQ.png
Below is the corresponding HTML code snippet:
<div class="dropdown" style="display: inline-block">
<img src="{{environment.assets_base_url}}assets/images/menu.png" id="menuid" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="menuid">
<a *ngIf="environment.enable_settigs" class="dropdown-item" href="{{settings_link}}">Settings</a>
<!--<a class="dropdown-item" href="{{upgrade_link}}">Payment</a>-->
<a class="dropdown-item" (click)="myLogout()">Logout</a>
</div>
</div>