Sticky Navbar in CSS

Source Code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS</title>
    <link rel="stylesheet" href="sticky.css">
 </head>
 <body>
   <div id="header">Header</div>
   <div id="navbar">
     <ul>
       <li>Home</li>
       <li>About</li>
       <li>Contact</li>
       <li>Downloads</li>
       <li>Produts</li>
     </ul>
   </div>
   <div id="box">
     <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur obcaecati, 
	eos quasi error accusantium vero corporis necessitatibus omnis minus molestias 
	fuga sit maxime possimus veniam ipsam! Alias dolore reiciendis tempora iusto? 
	Accusantium natusnostrum cumque molestiae voluptatum minus reiciendis corporis 
	voluptates modi. Culpa pariatur odio, adipisci perferendis amet, voluptatem 
	veritatis, quae delectus impedit nobis corporis vel repellendus aperiam. Minima 
	temporibus debitis eos veritatis deserunt maiores iure, ad vitae labore ipsam , 
	Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur obcaecati, 
	eos quasi error accusantium vero corporis necessitatibus omnis minus molestias 
	fuga sit maxime possimus veniam ipsam! Alias dolore reiciendis tempora iusto? 
	Accusantium natusnostrum cumque molestiae voluptatum minus reiciendis corporis 
	voluptates modi. Culpa pariatur odio, adipisci perferendis amet, voluptatem 
	veritatis, quae delectus impedit nobis corporis vel repellendus aperiam. Minima 
	temporibus debitis eos veritatis deserunt maiores iure, ad vitae labore ipsam , 
	Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur obcaecati, 
	eos quasi error accusantium vero corporis necessitatibus omnis minus molestias 
	fuga sit maxime possimus veniam ipsam! Alias dolore reiciendis tempora iusto? 
	Accusantium natusnostrum cumque molestiae voluptatum minus reiciendis corporis 
	voluptates modi. Culpa pariatur odio, adipisci perferendis amet, voluptatem 
	veritatis, quae delectus impedit nobis corporis vel repellendus aperiam. Minima 
	temporibus debitis eos veritatis deserunt maiores iure, ad vitae labore ipsam , 
	Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur obcaecati, 
	eos quasi error accusantium vero corporis necessitatibus omnis minus molestias 
	fuga sit maxime possimus veniam ipsam! Alias dolore reiciendis tempora iusto? 
	fuga sit maxime possimus veniam ipsam! Alias dolore reiciendis tempora iusto? 
	Accusantium natusnostrum cumque molestiae voluptatum minus reiciendis corporis 
	voluptates modi. Culpa pariatur odio, adipisci perferendis amet, voluptatem 
	veritatis, quae delectus impedit nobis corporis vel repellendus aperiam. Minima 
	temporibus debitis eos veritatis deserunt maiores iure, ad vitae labore ipsam , 
	Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur obcaecati, 
	eos quasi error accusantium vero corporis necessitatibus omnis minus molestias 
	fuga sit maxime possimus veniam ipsam! Alias dolore reiciendis tempora iusto? 
	Accusantium natusnostrum cumque molestiae voluptatum minus reiciendis corporis 
	voluptates modi. Culpa pariatur odio, adipisci perferendis amet, voluptatem 
	veritatis, quae delectus impedit nobis corporis vel repellendus aperiam. Minima 
	temporibus debitis eos veritatis deserunt maiores iure, ad vitae labore ipsam , 
	Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur obcaecati, 
	eos quasi error accusantium vero corporis necessitatibus omnis minus molestias 
	fuga sit maxime possimus veniam ipsam! Alias dolore reiciendis tempora iusto? 
	Accusantium natusnostrum cumque molestiae voluptatum minus reiciendis corporis 
	voluptates modi. Culpa pariatur odio, adipisci perferendis amet, voluptatem 
	veritatis, quae delectus impedit nobis corporis vel repellendus aperiam. Minima 
	temporibus debitis eos veritatis deserunt maiores iure, ad vitae labore ipsam , 
	Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur obcaecati, 
	eos quasi error accusantium vero corporis necessitatibus omnis minus molestias 
	fuga sit maxime possimus veniam ipsam! Alias dolore reiciendis tempora iusto? 
	Accusantium natusnostrum cumque molestiae voluptatum minus reiciendis corporis 
	voluptates modi. Culpa pariatur odio, adipisci perferendis amet, voluptatem 
	veritatis, quae delectus impedit nobis corporis vel repellendus aperiam. Minima 
	temporibus debitis eos veritatis deserunt maiores iure, ad vitae labore ipsam , 
	Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur obcaecati, 
	eos quasi error accusantium vero corporis necessitatibus omnis minus molestias 
	fuga sit maxime possimus veniam ipsam! Alias dolore reiciendis tempora iusto? 
	Accusantium natusnostrum cumque molestiae voluptatum minus reiciendis corporis 
	voluptates modi. Culpa pariatur odio, adipisci perferendis amet, voluptatem 
	veritatis, quae delectus impedit nobis corporis vel repellendus aperiam. Minima 
	temporibus debitis eos veritatis deserunt maiores iure, ad vitae labore ipsam , 
	Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur obcaecati, 
	eos quasi error accusantium vero corporis necessitatibus omnis minus molestias 
	fuga sit maxime possimus veniam ipsam! Alias dolore reiciendis tempora iusto? 
	Accusantium natusnostrum cumque molestiae voluptatum minus reiciendis corporis 
	voluptates modi. Culpa pariatur odio, adipisci perferendis amet, voluptatem 
	veritatis, quae delectus impedit nobis corporis vel repellendus aperiam. Minima 
	temporibus debitis eos veritatis deserunt maiores iure, ad vitae labore ipsam , 
	Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur obcaecati, 
	eos quasi error accusantium vero corporis necessitatibus omnis minus molestias 
	fuga sit maxime possimus veniam ipsam! Alias dolore reiciendis tempora iusto? 
	Accusantium natusnostrum cumque molestiae voluptatum minus reiciendis corporis 
	voluptates modi. Culpa pariatur odio, adipisci perferendis amet, voluptatem 
	veritatis, quae delectus impedit nobis corporis vel repellendus aperiam. Minima 
	temporibus debitis eos veritatis deserunt maiores iure, ad vitae labore ipsam , 
	Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur obcaecati, 
	eos quasi error accusantium vero corporis necessitatibus omnis minus molestias 
	fuga sit maxime possimus veniam ipsam! Alias dolore reiciendis tempora iusto?  
     </p>
   </div>
   <div id="footer">Footer</div>
 </body>
</html>
To download raw file Click Here

Source Code : Sticky.CSS

* {
 margin: 0;
 padding: 0;
}

html {
 height: 100%;
 width: 100%;
}

#header,
#footer {
 width: 100%;
 height: 200px;
 background-color: yellowgreen;
 padding: 5px;
}

#navbar {
 width: 100%;
 height: 50px;
 background-color: tomato;
 padding: 5px;
 position: sticky;
 top: 0;
}

#box {
 width: 100%;
 padding: 10px;
}

#navbar ul li {
 display: inline-block;
 list-style: none;
 padding: 10px;
 line-height: 30px;
 color: white;
}
To download raw file Click Here

CSS Tutorial

Properties Reference

Cascading Style Sheet

Flexbox Tutorial

CSS Grid Tutorial

Transitions Properties

CSS Properties with Examples

CSS Selectors

CSS Pseudo Elements

CSS Attribute Selectors

Input Pseudo Classes

CSS Examples

CSS Animation Projects

Learn All in Tamil © Designed & Developed By Tutor Joes | Privacy Policy | Terms & Conditions