So basically, I have my sticky navbar working with a working dropdown inside. My problem: when I scroll down and the sticky class is activated, the dropdown stops working. So how can I fix that?
This is the code I have over there
<div class="navtop">
<div class="dropdown-user">
<div class="dropbtn"><img src="images/user.png" alt="Perfil de Usuario" width="20px"><span>'.$_SESSION["username"].' <i class="fa fa-angle-down"></i></span></div>
<div class="dropdown-user-content" id="dropdown-user-content">
<a href="perfil.php"><i class="fa fa-fw fa-user"></i> Perfil de usuario</a>
<a href="mensajes.php"><i class="fa fa-fw fa-envelope"></i> Mensajes</a>
<a href="reglas.php"><i class="fa fa-fw fa-book"></i> Reglas</a>
<a href="resumen.php?logout=1" style="color:red"><i class="fa fa-fw fa-arrow-right"></i> Salir</a>
</div>
</div>
</div>
<style>
.sticky {
position: sticky;
top: 0;
z-index: 1;
}
.navtop {
width: 100%;
background-color: #000;
overflow: hidden;
color: #fff;
font-size: 12px;
}
.dropdown-user {
float: right;
overflow: hidden;
}
.dropdown-user:hover {
background: darkgrey;
cursor: pointer;
}
.dropdown-user .dropbtn {
outline: none;
height: 31px;
background-color: inherit;
font-family: inherit;
}
.dropdown-user img {
float: left;
margin: 5px 4px 0px 5px;
}
.dropdown-user span {
float: left;
padding: 8px 8px 8px 0px;
}
.dropdown-user-content {
display: none;
right: 0;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-user-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-user-content a:hover {
background-color: #ddd;
}
.dropdown-user:hover .dropdown-user-content {
display: block;
}
</style
Thanks in advance!
