Navigation Bar With Page Scroll To Every Section in HTML and CSS
Do you want a clean and stylish website with a easy navigation between pages? A cool scroll navigation bar will help you make a great experience for your site.
In this article, you’ll find out how to make a Navigation Bar with Page Scroll To Every Section completely free of charge. Here is a wonderful navigation menu which can be made editable and easy to integrate into any website.
Let’s dive into the details!
GitHub Source: Navigation Bar with Page Scroll
Features
Here are some of the key features:
- Easy to Customize: The code is very basic, and can easily be modified to suit your layout requirements without any difficulty.
- Well Commented: Each line of the code is providing comments for enhanced understanding of it and for future modifications.
- Compatible with All Modern CMS: You can use this navigation bar no matter what content management system you have – WordPress, Joomla, or any other one you prefer.
- Clean Code: The code is also kept organized to make sure that your website does not become slow and continue to function at top performances.
- Scroll to Top Button: Several pages include a tab that automatically scrolls the page to the top when activated.
Technologies Used
- HTML (Hypertext Markup Language)
- CSS (Cascading Style Sheets)
Video Tutorial
Steps to Build Menu
Follow these easy steps to build your own navigation bar with page scroll functionality:
- Create Project Folder: First step is to create a folder where you will place all the files you will need when working on the project.
- Create index.html: Create a file index.html, and it should contain structure of your website.
- Create style.css: Create a style.css, which will be used to style the navigation bar and the rest of the website.
- Copy and paste the Code: Now let’s copy the following HTML and CSS code to integrate the navigation bar into project.
HTML
Here is the HTML code for your index.html file:
<!DOCTYPE html>
<!-- Website - www.jvcodes.com -->
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8" />
<title>Pet Care Navigation Bar with Page Scroll | JV Codes</title>
<link rel="stylesheet" href="style.css" />
<!-- Fontawesome CDN Link -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<nav>
<div class="navbar">
<div class="logo"><a href="#">JV Codes</a></div>
<ul class="menu">
<li><a href="#Home">Home</a></li>
<li><a href="#About">About</a></li>
<li><a href="#Category">Category</a></li>
<li><a href="#Contact">Contact</a></li>
<li><a href="#Feedback">Feedback</a></li>
</ul>
</div>
</nav>
<section id="Home">Home Section</section>
<section id="About">About Section</section>
<section id="Category">Category Section</section>
<section id="Contact">Contact Section</section>
<section id="Feedback">Feedback Section</section>
<div class="button">
<a href="#Home"><i class="fa-solid fa-arrow-up"></i></a>
</div>
</body>
</html>
CSS
Here is the complete code for style.css file to style the menu:
/* Importing Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
/* Global Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
scroll-behavior: smooth; /* Enables smooth scrolling */
}
/* Body Styles */
body {
background-color: #f8f8f8; /* Light background for body */
}
/* Navigation Bar */
nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 75px;
background: #27ae60; /* New color: Calming green for navigation bar */
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); /* Light shadow for depth */
z-index: 1000; /* Ensures the navbar stays on top */
}
/* Navbar container to align content */
nav .navbar {
display: flex;
align-items: center;
justify-content: space-between;
height: 100%;
max-width: 90%;
margin: auto;
}
/* Logo Styles */
nav .navbar .logo a {
color: #fff; /* White text for logo */
font-size: 27px;
font-weight: 600;
text-decoration: none; /* No underline */
}
/* Menu Container */
nav .navbar .menu {
display: flex; /* Display menu items in a row */
}
/* Menu List Items */
.navbar .menu li {
list-style: none;
margin: 0 15px; /* Spacing between menu items */
}
/* Menu Links */
.navbar .menu li a {
color: #fff; /* White text for menu items */
font-size: 17px;
font-weight: 500;
text-decoration: none; /* No underline for links */
transition: color 0.3s; /* Smooth color transition on hover */
}
/* Hover Effect on Menu Links */
.navbar .menu li a:hover {
color: #d4efdf; /* Lighter green color on hover */
}
/* Section Styling */
section {
display: flex;
height: 100vh; /* Full viewport height */
width: 100%;
align-items: center;
justify-content: center;
font-size: 70px;
color: #2e4053; /* Darker color for section text */
text-align: center; /* Centering text */
}
/* Home Section */
#Home {
background: #eafaf1; /* Light green background */
}
/* Services Section */
#Services {
background: #f7f7f7; /* Light gray background */
}
/* Adoption Section */
#Adoption {
background: #eafaf1; /* Matching green tone */
}
/* Contact Section */
#Contact {
background: #f7f7f7; /* Consistent light gray background */
}
/* Testimonials Section */
#Testimonials {
background: #eafaf1; /* Another light green background */
}
/* Scroll-to-Top Button */
.button a {
position: fixed;
bottom: 20px;
right: 20px;
color: #fff; /* White text for the button */
background: #27ae60; /* Matching green background for button */
padding: 7px 12px;
font-size: 18px;
border-radius: 6px; /* Rounded corners */
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); /* Light shadow for button */
transition: background 0.3s; /* Smooth background transition */
}
/* Hover Effect on Scroll Button */
.button a:hover {
background: #229954; /* Slightly darker green on hover */
}
Download Source Code
You can easily download the complete source code for this navigation bar through the button below. The necessary source files called index.html and style.css contain all the necessary codes. It’s free from any issue of copyright to use in your projects.
Conclusion
You are welcome to use this Navigation Bar With Page Scroll To Every Section in your personal or commercial projects. Do not forget to give credit to JV Codes by linking back to us and it will also help with supporting our efforts.
Moreover, follow the JV Codes YouTube channel to see more of such tutorials and if you have any questions, feel free to ask in the comments section below the post and I will gladly help!
