I'm currently in the process of creating a basic navbar that includes a drop-down menu on the far right side, as depicted here:
https://i.sstatic.net/hs9us.png
The issue I'm facing is that when I click on the dropdown, the navbar automatically resizes itself, as illustrated in the image below, which is not my desired outcome
https://i.sstatic.net/5EYmU.png
Below you'll find the code for my navbar:
<nav class="navbar navbar-dark bg-dark">
<a class="navbar-brand" href="/dashboard">
<img
src="{{ url_for('static', filename='images/logo.png') }}"
width="30"
height="30"
class="d-inline-block align-top"
alt=""
/>
App Test
</a>
<div>
<ul class="navbar-nav" style="padding: 0px">
<li class="nav-item dropdown" style="border: none">
<a
class="nav-link dropdown-toggle"
href="#"
id="navbarDropdownMenuLink"
role="button"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
<img
src="https://s3.eu-central-1.amazonaws.com/bootstrapbaymisc/blog/24_days_bootstrap/fox.jpg"
width="40"
height="40"
class="rounded-circle"
/>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Dashboard</a>
<a class="dropdown-item" href="#">Edit Profile</a>
<a class="dropdown-item" href="#">Log Out</a>
</div>
</li>
</ul>
</div>
</nav>