Jump to content
Sign in to follow this  
Tirant

Dropdown in a sticky nav

Recommended Posts

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"].'&nbsp;&nbsp;<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!

Share this post


Link to post
Share on other sites

Don't know what is causing this particular problem, but I removed the anchor links
and the drop-down works fine.  It might be a place to start further investigations.
I don't know enough about PHP to help.

	  <div class="dropdown-user-content" id="dropdown-user-content">
   <a href="#"><i class="fa fa-fw fa-user"></i> Perfil de usuario</a>
   <a href="#"><i class="fa fa-fw fa-envelope"></i> Mensajes</a>
   <a href="#"><i class="fa fa-fw fa-book"></i> Reglas</a>
   <a href="#" style="color:red"><i class="fa fa-fw fa-arrow-right"></i> Salir</a>
  </div>

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...