Don Posted February 26, 2018 Share Posted February 26, 2018 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. Link to comment Share on other sites More sharing options...
Ingolme Posted February 26, 2018 Share Posted February 26, 2018 You can use "position: sticky" in your CSS to make the navbar stick to the top when scrolling down the page. Link to comment Share on other sites More sharing options...
Don Posted February 26, 2018 Author Share Posted February 26, 2018 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; } Link to comment Share on other sites More sharing options...
Ingolme Posted February 26, 2018 Share Posted February 26, 2018 The "overflow: hidden" rule is going to make your menu invisible. Remove it. I've been seeing this a lot lately, where are people getting this code? Link to comment Share on other sites More sharing options...
dsonesuk Posted February 26, 2018 Share Posted February 26, 2018 (edited) From w3schools tutorials, that's where! https://www.w3schools.com/howto/howto_js_navbar_sticky.asp https://www.w3schools.com/css/tryit.asp?filename=trycss_dropdown_navbar fix https://www.w3schools.com/code/tryit.asp?filename=FOUGL6SG7XQW Edited February 26, 2018 by dsonesuk Link to comment Share on other sites More sharing options...
Don Posted February 26, 2018 Author Share Posted February 26, 2018 thank you for the answers, you really helped a lot!!! Link to comment Share on other sites More sharing options...
Don Posted February 26, 2018 Author Share Posted February 26, 2018 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? Link to comment Share on other sites More sharing options...
Ingolme Posted February 26, 2018 Share Posted February 26, 2018 There is no reason to avoid the CSS solution. The only reason Javascript solutions exist is because they were created back when CSS did not have this option. Just a note: Safari is outdated and only supports sticky position with the -webkit- prefix. You should have both declarations whenever you want something to be sticky: .element { position: -webkit-sticky; position: sticky; } Link to comment Share on other sites More sharing options...
Don Posted February 26, 2018 Author Share Posted February 26, 2018 thanks again!!! Link to comment Share on other sites More sharing options...
dsonesuk Posted February 26, 2018 Share Posted February 26, 2018 I think it is to early to use position: sticky; as some mobile browsers still don't support it fully, and there are some known issues where only the main modern browsers that have only just began to support it, still have some oddities when using this. Until it has become more established i should avoid it for now. Link to comment Share on other sites More sharing options...
Don Posted February 27, 2018 Author Share Posted February 27, 2018 oh, i get it. i just tested it on my smartphone and, indeed, it isn't working. thanks for mentioning it! Link to comment Share on other sites More sharing options...
Recommended Posts