Search the Community

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!

Hello, I'm in need to alter the "landing"/on click position of all the sites page anchor links (<a name="name-here">). I have a sticky menu that cover the titles of the section being linked to. I was initially trying to style the "a name" but I'm not sure it that's possible. So, if I were to have: <a name="page-title"></a> <h2>Title of Section Ect.</h2> <p>Information about this sections and da, da, da....</p> <a name="page-title2"></a> <h2>Another Title of Section Ect.</h2> <p>Some more Information about this sections and da, da, da....</p> I'm wondering if I can do something in CSS to cover all "name." I'm able to add spacing to the top/before using: a[name]:before { content:""; display:block; margin-top: 75px; } ...but then I'm just adding a fat gap before each section and it looks bad. I can't go through and add an id and/class to all these links, it's just not possible at this point. Hope this makes sense. Any help and/or suggestions are greatly welcome. Thanks in advance! m@

Hello there, I quite stumped on what appears to be a JS conflict. I have a rollover effect on landing pages, and also have a sticky menu. When on the landing page(s) with the rollover effects, and you scroll down and scroll over the top sticky menu (not the static nav), after you roll off the drop down of the menu, it will not disappear. I'm having a hard time pin pointing what/where the conflict is. Here is a link to a page where I'm having a issue: http://radionorthgroup.oiw9.com/our-services/index.htm Any and all help would be greatly appreciated. Thanks in advance, m@