any one help me to make my top sticky in my css code.(code is in the description)
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body {margin: 0;} ul.topnav { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; position: sticky; } ul.topnav li {float: left;position: sticky;;} ul.topnav li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; position: sticky; } ul.topnav li a:hover:not(.active) {background-color: #111;} ul.topnav li a.active {background-color: #4CAF50;} ul.topnav li.right {float: right;} </style> </head> <body> <ul class="topnav"> <li><a class="active" href="comicbook.html">Home</a></li> <li><a href="#news">News</a></li> <li><a href="#contact">Contact</a></li> <li class="right"><a href="#about">About</a></li> </ul> <div style="padding:0 16px; font-size: 300px"> <h2>Responsive Topnav Example</h2> <p>This example use media queries to stack the topnav vertically when the screen size is 600px or less.</p> <p>You will learn more about media queries and responsive web design later in our CSS Tutorial.</p> <h4>Resize the browser window to see the effect.</h4> </div> </body> </html>
Often have questions like this?
Learn more efficiently, for free:
