Take a look at the image below. There is a navbar toggle button on the upper right corner of the page. When I expand it, the dropdown items occupy the entire width of the page, causing an issue where clicking anywhere within the red box triggers the dropdown link action. How can I restrict the effective area of the dropdown items to only the text itself? I do not want the text to come to the left side of the page. Thank you for your assistance.
https://i.sstatic.net/TXlgB.png
Here is the code that I am currently using:
<nav class="navbar navbar-light">
<a class="navbar-brand" href="#"><img src="../../assets/images/yet.png" alt="" srcset=""></a>
<ul *ngIf="!name" class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" routerLink="login">login</a>
</li>
</ul>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li *ngIf="name" class="nav-item dropdown">
<a class="nav-link" href="#">{{name}}</a>
</li>
<li class="nav-item">
<a class="nav-link drop" href="#" (click)="switchBackground()">change bg</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">settings</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" (click)="logoff()">Log Off</a>
</li>
</ul>
</div>
</nav>