Single Page Smooth Scrolling Navigation Menu using HTML and CSS

Navigation Menu | November 17, 2020

This is a tutorial blog for navigation click to one page smooth scroll effect without jQuery. This blog to learn how to create a single page website menu with smooth scroll using CSS. Only CSS3 use to create single page navigation website with smooth scroll effect.

Single Page Smooth Scrolling Navigation Menu using HTML and CSS

This is a tutorial video for navigation click to one page smooth scroll effect without jQuery. This video to learn how to create a single page website menu with smooth scroll using CSS. Only CSS3 use to create single page navigation website with smooth scroll effect.

You might like this

Smooth Scrolling Navigation Menu Source Code

This source code use to you can create single page smooth scrolling navigation menu.

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>
<header id="header">
	<div class="container">
		<a href="#" class="logo"><img src="images/logo.png"></a>
		<nav class="main-nav">
			<ul>
				<li><a href="#home">Home</a></li>
				<li><a href="#about">About</a></li>
				<li><a href="#service">Service</a></li>
				<li><a href="#contact">Contact</a></li>
			</ul>
		</nav>
	</div>
</header>
<section class="banner" id="home">
	<img src="images/banner.png">
</section>
<section class="about-section" id="about">
	<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>
		<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>	
</section>
<section class="service-section" id="service">
	<div class="container">
		<h1>Our 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>
		<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>	
</section>
<section class="contact-section" id="contact">
	<div class="container">
		<h1>Contact 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>
		<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>	
</section>

</body>
</html>

CSS Code

Copy

body,html{
	margin: 0;
	font-family: arial;
	font-size: 18px;
	scroll-behavior: smooth;
}
#header{
	background:rgba(0,0,0,0.8);
	padding: 20px 0;
	width: 100%;
	position: fixed;
	left: 0;
	top: 0;
}
.container{
	width: 86%;
	margin: 0 auto;
}
#header .container{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.main-nav{}
.main-nav ul{
	padding: 0;
	margin: 0;
	list-style: none;
}
.main-nav ul li{
	float: left;
	margin-left: 35px;
	font-size: 18px;
} 
.main-nav ul li a{
	text-decoration: none;
	color: #fff;
} 
.banner img{
	max-width: 100%;
	vertical-align: top;
}
.about-section,
.service-section,
.contact-section{
	height: 100vh;
	display: flex;
	align-items: center;
}
.about-section{
	background:#dbfbf4;
}
.service-section{
	background:#cfd6f9;
}
.contact-section{
	background:#d6f9cf;
}