Sticky Header using CSS | Navigation Bar Fixed on top after scrolling using CSS

This is a tutorial blog for header fixed after scrolling with pure css. This tutorial video to learn how to create a sticky navbar after web page scrolling with css. Only css use to create sticky header.

Sticky Navigation Bar Fixed top after scrolling using CSS

This is a tutorial video for header fixed after scrolling with pure css. This tutorial video to learn how to create a sticky navbar after web page scrolling with css. Only css use to create sticky header.

Sticky Navigation Bar Fixed top after scrolling using CSS [Source Code]

This source code use to you can create Sticky Navigation Bar Fixed top after scrolling using CSS

You can also download this source code through the given link. Click here to download source code

HTML Code

Copy

<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
	<div class="header_top">
		<div class="container">
			<a href="#" class="logo"><img src="images/logo.png" alt="logo"></a>	
		</div>
	</div>
	<div class="header_bottom">
		<div class="container">
			<nav class="main_nav">
				<ul>
					<li><a href="#">Home</a></li>
					<li><a href="#">About Us</a></li>
					<li><a href="#">Services</a></li>
					<li><a href="#">Contact Us</a></li>
				</ul>
			</nav>
		</div>
	</div>
	<div class="banner">
		<img src="images/banner.png" alt="banner">
	</div>
	<div class="about_section">
		<div class="container">
			<h1>About Us</h1>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
			quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
			consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
			cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
			proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		</div>
	</div>
	<div class="service_section">
		<div class="container">
			<h1>Services</h1>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
			quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
			consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
			cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
			proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		</div>
	</div>
	<div class="footer">
		<div class="container">
			© Invention Tricks
		</div>
	</div>
	<script type="text/javascript">
		var ww = window.innerHeight
		alert(ww)
	</script>
</body>
</html>

CSS Code

Copy

body,html{
	margin:0;
	padding: 0;
	font-family: arial;
}
.header_top{
	background:rgba(0,0,0,0.8); 
	padding: 20px 0;
	text-align: center;
}
.container{
	max-width: 1100px;
	margin: 0 auto;
}
.header_bottom{
	background:rgba(0,0,0,0.6); 
	padding: 20px 0;
	position: sticky;
	top: 0
}
.main_nav{
	text-align: right;
}
.main_nav ul{
	padding: 0;
	margin: 0;
	list-style: none;
}
.main_nav ul li{
	display: inline-block;
	margin-left: 30px;
}
.main_nav ul li a{
	color: #fff;
	text-decoration: none;
}
.banner img{
	max-width: 100%;
}
.about_section{
	background:rgba(0,0,0,0.1); 
}
.service_section,
.about_section{
	padding: 40px;
}
.footer{
	background:#ccc;
	text-align: center;
	padding: 20px 0; 
}

Sticky Header using CSS | Navigation Bar Fixed on top after scrolling using CSS

Sticky Navigation Bar Fixed top after scrolling using CSS

Sticky Navigation Bar Fixed top after scrolling using CSS [Source Code]

Build a Stop-Watch Web App Using JavaScript

Build Loan EMI Calculator DIY Finance Tool using JavaScript

Navigation Menu Click to Single Page Website Smooth Scrolling Using jQuery