Despite my navbar working well and being fully responsive, I encountered an issue where opening a confirm dialog in the background caused the navbar width to expand to 800px
even though the screen width was 1480px
, creating empty space on the right side, as shown in the image below.
https://i.sstatic.net/9OaBO.png
I am unsure how to resolve this issue. Below is the code for my navbar:
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<a class="navbar-brand" routerLink="">frontend</a>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown">
<a class="nav-link menu-item dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Vehicles</a>
<div class=" dropdown dropdown-menu">
<a class="dropdown-item menu-item" routerLink="/topic"> Vehicles list </a>
<a class="dropdown-item menu-item" routerLink="/add-topic"> Add vehicle </a>
</div>
</li>
</ul>
</div>
</nav>
<router-outlet></router-outlet>
I am using the default confirm dialog from primeNg without any modifications: confirm dialog
Are there any suggestions on how to ensure the navbar always stays at 100% of the screen width through additional CSS styling?