i am using and created a bootstrap navabar and in that dropdown in desktop view it work perfectly fine but in mobile view it stretch the navbar like this i want to avoid because it look ugly here is the screenshot what I am talking about:
here is my code
<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- Body -->
<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #025;">
<div class="container-fluid">
<a class="navbar-brand text-white" href="{% url 'accounts:home' %}" style="font-size: 25px; font-weight:600;">
<img src="{% static 'image/logo/logo.png' %}" class="d-inline-block align-text-center logo-img" style="margin-left: 150px; height: 40px;"> BuyBuy
</a>
<div class="navbar-nav dekstop_search">
<form class="form-inline" action="{% url 'products:search' %}">
{% csrf_token %}
<input class="search" type="search" placeholder="Search..." aria-label="Search" name="search" required>
<button class="btn sea btn-outline-primary" type="submit" value="Search"><i class="fas fa-search text-white"></i></button>
</form>
</div>
<!-- Links -->
{% if user.is_authenticated %}
<!-- Right -->
<div class="navbar-nav">
<a href="#" class="nav-link text-white text-center"><i class="fas fa-heart"></i>
<span class="badge" style="background-color: white; color:#025; padding:3px;">{{wish|length}}</a>
<a href="#" class="nav-link text-white text-center"><i class="fas fa-bell"></i>
<span class="badge" style="background-color: white; color:#025; padding:3px;">{{wish|length}}</a>
<a class="nav-link text-white" href="{% url 'orders:cart' %}"><i class="fas fa-shopping-cart"></i>
<span class="badge" style="background-color: white; color:#025; padding:3px;">{{request.session.cart.keys|length}}</span></a>
<div class="dropdown">
<img class="nav-link dropdown-toggle" href="#" id="navbarDarkDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false" style="height:50px; border-radius: 50%; margin-right:150px;" src="{{ user.profile.profile_pic.url }}">
<div class="dropdown-menu drop" aria-labelledby="navbarDropdown">
<li class="item text-center" style="font-weight: bolder;"> Hi <strong style="color: #B9C04C; cursor:default;"> {{ user.username }} </strong></li>
<div class="dropdown-divider"></div>
<a class="dropdown-item text-center" href="{% url 'accounts:profile' request.user.username %}">My Account</a>
<a class="dropdown-item text-center" href="{% url 'orders:myorders' %}">My Order</a>
<a class="dropdown-item text-center" href="#">My Address</a>
<a class="dropdown-item text-center" href="#">My Cart</a>
<a class="dropdown-item text-center" href="{% url 'accounts:logout' %}">Log Out</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item text-center" href="#">Settings</a>
<a class="dropdown-item text-center" href="#">Help</a>
<a class="dropdown-item text-center" href="#">Privacy Policy</a>
</div>
</div>
</div>
{% else %}
<div class="navbar-nav">
<a class="nav-link text-white" href="{% url 'orders:cart' %}"><i class="fas fa-shopping-cart"></i>
<span class="badge" style="background-color: white; color:#025; padding:3px;">{{request.session.cart.keys|length}}</span></a>
<a class="nav-link" href="{% url 'accounts:login' %}"><button type="button" class="btn btn-outline-primary text-white">Log In</button></a>
</div>
{% endif %}
</div>
</nav>i didn't tried anything becuase i don't know what to do any suggestion will be helpfull i want it to be like that in mobile view too:
current error
css
.drop{
position: absolute !important;
left: auto !important;
right: 0 !important;
}
