Sticky Navigation Bar on Scroll CSS

byCodingFlicks -November 30, 2023

0

One of the most important elements of any web layout is the navigation bar. The nav items in this navigation menu contain links to different sections or pages of a website. This navigation bar plays a very important role in easily navigating and accessing different parts of the website. Today we will share with you a snippet about a sticky navigation bar on scroll CSS. How to create this navbar on scroll CSS snippet is shown in the video tutorial below. Before collecting the source code, watching the video will help you to understand the code. If you like the contents of our channel, please subscribe to our YouTube channel.

Video Tutorial:

Hope you have watched the sticky navigation bar CSS video tutorial. This sticky navigation bar is a website element that always stays at the top of the webpage. The main navigation bar is always sticky at the top no matter how far down the user scrolls. This is done so that the navigation menu is always accessible to the user. It is generally used to give the user a positive user experience. We often use JavaScript to provide dynamic and interactive effects on the website. But a basic sticky navigation bar can be built without relying on JavaScript. Nowadays many websites like news websites, blogs, e-commerce platforms, etc. use sticky navigation bars. Many prominent websites like Google, Amazon, Apple, Netflix, Medium, GitHub, etc. use this sticky navigation bar.

You May Also Like:

Sticky navigation bar on scroll CSS [ Source Code ]:

The navigation bar element is an important element of a website, and a sticky navigation bar is used on various websites to improve the user experience of that particular website. Create an HTML and CSS file to create today's snippet. Then copy the code from the code box below and paste it into your files. If there is any problem, download the code from the download button below.

ADD HTML:

<!DOCTYPE html>
<html lang="en">
<!-- codingflicks.com -->
<head>
	<meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Navigation Bar With Scroll Every Section</title>	
	<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600&display=swap" rel="stylesheet">
	<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">	
  <link href="style.css" rel="stylesheet">
</head>
<body>
	<div class="menu-area">
		<div class="main-menu">
			<div class="logo">
				<a href="#">NeduZone</a>
			</div>
			<ul class="nav-item">
				<li>
					<a href="#home">Home</a>
				</li>
				<li>
					<a href="#about">About</a>
				</li>
				<li>
					<a href="#portfolio">Portfolio</a>
				</li>
				<li>
					<a href="#services">Services</a>
				</li>
				<li>
					<a href="#contact">Contact</a>
				</li>
			</ul>
		</div>
	</div>
	<section id="home">
		Homepage
	</section>
	<section id="about">
		About
	</section>
	<section id="portfolio">
		Portfolio
	</section>
	<section id="services">
		Services
	</section>
	<section id="contact">
		Contact
	</section>
	<div class="scroll-top">
		<a href="#home"><i class="fa fa-arrow-up"></i></a>
	</div>
</body>
</html>

ADD CSS:

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: montserrat;
	scroll-behavior: smooth;
}
.menu-area {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 75px;
	background: #212121;
	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
.main-menu {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 100%;
	max-width: 90%;
	background: #212121;
	margin: auto;
}
.logo a {
	color: #fff;
	font-size: 27px;
	font-weight: 600;
	text-decoration: none;
}
.nav-item {
	display: flex;
}
.nav-item li {
	list-style: none;
	margin: 0 15px;
}
.nav-item li a {
	color: #fff;
	font-size: 17px;
	font-weight: 500;
	text-decoration: none;
}
section {
	display: flex;
	height: 100vh;
	width: 100%;
	align-items: center;
	justify-content: center;
	font-size: 85px;
}
#home, #portfolio, #contact {
	background: darkorange;
	color: #212121;
}
#about, #services {
	background: #000;
	color: #fff;
}
.scroll-top a {
	position: fixed;
	bottom: 20px;
	right: 20px;
	color: #212121;
	background: #fff;
	padding: 20px;
	font-size: 16px;
	border-radius: 6px;
	box-shadow: rgba(0, 0, 0, 0.15);
}

Hope the fixed navigation bar CSS snippet is working properly for you. So you have seen how to make a fixed header or sticky navigation bar using only HTML and CSS without JavaScript. Explore our website further to get more source code. Thank you very much for visiting our website.

DOWNLOAD CODE

Please do not enter any spam link in the comment box.