I'm facing an issue with the default bootstrap 5 navbar. When I attempt to add a dropdown on the right side, the list of dropdown items extends beyond the screen on the right. You can see the problem here.
I've tried the solutions suggested in similar cases, such as:
- Bootstrap 4: Dropdown menu is going off to the right of the screen
- Bootstrap: Position of dropdown menu relative to Navbar item
(I have attempted using classes like dropdown-menu-right or pull-right without success...)
Here is the code snippet that's causing the trouble:
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">
<a
class="nav-link dropdown-toggle"
href="#"
id="navbarDropdown"
role="button"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Username
</a>
<div
class="dropdown-menu dropdown-menu-right"
aria-labelledby="navbarDropdown"
>
<a class="dropdown-item dropdown" href="#"> Edit settings </a>
<a class="dropdown-item" href="#"> Edit profile page </a>
<a class="dropdown-item" href="#"> Show profile page </a>
<a class="dropdown-item" href="#"> Create profile page </a>
</div>
</li>
</ul>
And here is the navbar section of my code:
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Blog</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-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 me-auto mb-2 mb-lg-0">
<li class="nav-item dropdown">
<a
class="nav-link dropdown-toggle"
href="#"
id="navbarDropdown"
role="button"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Categories
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li>
<a class="dropdown-item" href="#">Cat1</a>
</li>
<li>
<a class="dropdown-item" href="#">Cat2</a>
</li>
<li>
<a class="dropdown-item" href="#">Cat3</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Add post</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Add category</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Logout</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Sign in</a>
</li>
</ul>
</div>
<!-- Troublesome code section -->
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">
<a
class="nav-link dropdown-toggle"
href="#"
id="navbarDropdown"
role="button"
data-bs-toggle="dropdown"
aria-expanded="false"
>
{{ user.first_name }} {{ user.last_name }}
</a>
<div
class="dropdown-menu dropdown-menu-right"
aria-labelledby="navbarDropdown"
>
<a class="dropdown-item dropdown" href="#"> Edit settings </a>
<a class="dropdown-item" href="#"> Edit profile page </a>
<a class="dropdown-item" href="#"> Show profile page </a>
<a class="dropdown-item" href="#"> Create profile page </a>
</div>
</li>
</ul>
<!-- ########################## -->
Thank you.