Often, I want to incorporate a Bootstrap 5 dropdown menu into my project, but I encountered an unexpected issue.
The menu opens correctly, but when I hover over the menu items, the hover effect is not triggered, and clicking on a link does not work. It appears that my menu is located behind another element.
Here is a link to the JsFiddle for reference.
HTML Code:
<body>
<div id="side-bar">
</div>
<div id="top-bar">
<div class="d-flex justify-content-between top-bar-content">
<div>
<nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item active">
<a href="/accueil">Accueil</a>
</li>
</ol>
</nav>
</div>
<div>
<i class="fas fa-user"></i>
<span class="text-white mx-2">Username</span>
<a href="#" data-bs-toggle="dropdown" aria-expanded="false" id="dropdown_user">
<i class="fas fa-bars"></i>
</a>
<ul class="dropdown-menu" aria-labelledby="dropdown_user">
<li><a class="dropdown-item" href="/utilisateur/1">Mon profil</a></li>
<li><a class="dropdown-item" href="/utilisateur/">Administration</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item" href="/logout">Me déconnecter</a></li>
</ul>
</div>
</div>
</div>
<div id="main-content">
Suuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuper
loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong text
<div>
<i class="fas fa-user"></i>
<span class="text-white mx-2">Username</span>
<a href="#" data-bs-toggle="dropdown" aria-expanded="false" id="dropdown_user">
<i class="fas fa-bars"></i>
</a>
<ul class="dropdown-menu" aria-labelledby="dropdown_user">
<li><a class="dropdown-item" href="/utilisateur/1">Mon profil</a></li>
<li><a class="dropdown-item" href="/utilisateur/">Administration</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item" href="/logout">Me déconnecter</a></li>
</ul>
</div>
</div>
Sass Code:
body
background-color: ghostwithe
min-height: 100%
a
text-decoration: none !important
color: inherit !important
$breadcrumb-divider-color: black
$breadcrumb-active-color: black
.bold
font-weight: bold
#side-bar
position: fixed
width: 260px
z-index: 1000
left: 0
top: 0
border-right: 1px solid #162636
min-height: 100vh
border-right: 3px solid grey
#top-bar
position: fixed
top: 0
right: 0
width: calc( 100vw - 260px )
height: 50px
background-color: #0984e3
#main-content
position: fixed
right: 0
width: calc( 100vw - 260px )
height: calc( 100vh - 50px )
margin-top: 50px
padding-left: 5px
padding-right: 5px
overflow-y: auto
overflow-x: hidden
hr
margin: 2px auto 2px auto
border: none
height: 2px !important
hr.cyan
color: cyan
hr.grey
color: #162636
.top-bar-content
margin: 13px
.breadcrumb
margin-bottom: 0 !important
color: black
.breadcrumb-item
&.active
color: white
&:hover
color: white !important
However, when I place the dropdown menu elsewhere, such as in the #main-content div, it functions correctly (as seen in the JsFiddle).
I have searched online, but I have not found a similar question addressing my issue.
Here are some related cases that did not provide a solution:
- Bootstrap link not clickable
- Bootstrap 4 navbar dropdown menu item not clickable
There are no error messages displayed.
I need to be able to interact with my dropdown menu effectively.
If anyone has a solution, please feel free to share, and I can provide more information if needed.
Thank you!
Edit: Right below $breadcrumb-active-color, there is typically
@import "~bootstrap/scss/bootstrap"
I removed this from the JsFiddle because I suspected it might be conflicting with the bootstrap import in JsFiddle