Check Out the Expected Look Here (Image link)
See How it Appears on Mobile Devices
The dropdown menu causes an increase in the size of the navbar on the mobile version.
Below is the code snippet:
<div style=" background-image: url(https://i.imgur.com/408H5PI.jpg); background-size: cover; height: 100vh; background-attachment: fixed;">
<div class="sticky d-inline">
<!--Navbar Start-->
<nav class="navbar navbar-expand-lg navbar-light fixed-top" style="background: #285123; position: static;">
<a class="navbar-brand" href="/"><img src="https://i.imgur.com/ui7PG0R.png" alt="text bajo" width="50px" height="50px"></img></a>
</button>
<div class=&q ` uot ;navbar-expand-lg" id="navbarNavDropdown">
<ul class="navbar-nav navbar-expand-lg">
<li class="nav-item dropdown float-right navbar-expand-lg">
<a class="nav-link dropdown-toggle text-light" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Category
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
{% for Category in category%}
<a class="dropdown-item" href="{{url_for('get_category', id=Category.id)}}">{{Category.name}}</a>
{% endfor %}
</div>
</li>
</ul>
</div>
</nav>
</div>