Jump to content


  • Content count

  • Joined

  • Last visited

Community Reputation

0 Neutral

About Don

  • Rank
  1. how to create a sticky navbar with dropdown

    oh, i get it. i just tested it on my smartphone and, indeed, it isn't working. thanks for mentioning it!
  2. how to create a sticky navbar with dropdown

    guys one last question: it seems a lot easier to add to the ul: top: 0; position: sticky; rather than the jss way (adding the .sticky class to the navbar when it reaches top etc) is there a general reason for avoiding the position: sticky method?
  3. how to create a sticky navbar with dropdown

    thank you for the answers, you really helped a lot!!!
  4. how to create a sticky navbar with dropdown

    first of all thanks for the answer. as i said i tried it and although the navbar sticks to the top, the dropdown effect doesn't work anymore. below is my code: <!DOCTYPE html> <html lang="en-US"> <head> <title>Site title</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="test_style.css"> </head> <body> <div class="topbar"> <a href="#"><img class="logo" src="logo.png" alt="logo"></a> <div class="topphrase">a demo site</div> </div> <ul id="navbar"> <li><a class="active" href="">Home</a></li> <li><a href="">News</a></li> <li class="dropdown"> <a class="dropbtn" href="javascript:void(0)">Products</a> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </li> <li><a href="">About</a></li> </ul> <script> </script> </body> </html> and the css one: body { font-family: arial; } .topbar { height: 80px; background: linear-gradient(to bottom right, rgb(200, 200, 200), rgb(100, 100, 100)); } .logo { width: 80px; height: 80px; float: left; } .topphrase { font-family: courier; font-size: 40px; color: rgb(255, 255, 255); padding-top: 35px; padding-right: 40px; float: right; } ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: rgb(100, 100, 100); } li { float: left; } li a.active { background-color: rgb(30, 65, 95); } li a, .dropbtn { display: inline-block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; width: 80px; } li a:hover, .dropdown:hover .dropbtn { background-color: rgb(30, 65, 95); } .dropdown { display: inline-block; position: relative; } .dropdown-content { display: none; position: absolute; background-color: rgb(255, 255, 255); width: 160px; box-shadow: 5px 10px 10px rgba(0,0,0,0.3); z-index: 1; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; width: 128px; z-index: 1; } .dropdown-content a:hover { background-color: rgb(140, 185, 220); } .dropdown:hover .dropdown-content { display: block; }
  5. i want to create a website with an image on top-left, a text right next to it and below that a navbar with a dropdown list. so far i've created that and now i am stuck trying to add the sticky effect to the navbar when i scroll down and navbar reaches top. the img and text on top are in a div element (because i wanted to add a background color to them) and the navbar is a list with a dropdown class for some elements. i 've tried several things with jss (adding the sticky effect to the navbar when reaching top or adding a hidden navbar which appears when you scroll down and the first one disappears) but the dropdown list won't appear then. any suggestions? thanks p.s. i am posting this on css because i think it's a css problem (something with display/position of the elements), but i am not sure.