Sticky Navigation Bar with HTML,CSS
and JavaScript
Today we will make something that generally utilizes on the site and is significant for the site, that is Tacky Route Bar in HTML CSS and JavaScript. Tacky route on scroll implies the activity on the route bar that is stuck on the highest point of the site page while the page looks to the potential gain. A tacky navbar makes the site more appealing and simple to bounce starting with one website page then onto the next.
The picture I have transferred on the site page is the genuine model that we will create. The route that you can see on the picture is the cares for page look to the potential gain. Yet, in the event that the page doesn't parchment and stays in the underlying condition then we will see an alternate appearance on this route menu bar. We should view the genuine illustration of this tacky navbar activity on the look from the given video instructional exercise likewise you will get every one of the thoughts of how all codes are functioning in the program impeccably.
Sticky Navigation Bar with HTML,CSS and JavaScript Video Tutorial
Sticky Navigation Bar with HTML,CSS and JavaScript [Source Codes]
To create Sticky Navigation Bar with HTML,CSS and JavaScript, follow the given steps line by line:
Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
Create an index.html file. The file name must be index and its extension .html
Create a style.css file. The file name must be style and its extension .css
Create a script.js file. The file name must be style and its extension .js
Once you create these files, paste the given codes into the specified files. If you don’t want to do these then scroll down and download the source code.
First, paste the following codes into your index.html file
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title> Sticky Navigation Bar</title>
- <link rel="stylesheet" href="style.css">
- </head>
- <body>
- <nav>
- <div class="nav-content">
- <div class="logo">
- <a href="#">onlinefindout</a>
- </div>
- <ul class="nav-links">
- <li><a href="#">HOME</a></li>
- <li><a href="#"> BLOG</a></li>
- <li><a href="#">SKILLS</a></li>
- <li><a href="#">ABOUT US</a></li>
- <li><a href="#">CONTACT US</a></li>
- </ul>
- </div>
- </nav>
- <section class="home"></section>
- <div class="text">
- <p><h2>Sticky Navigation Bar</h2>
- <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
- <br><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> <br>
- <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> <br>
- <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> <br>
- <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
- </div>
- <script src="script.js"></script>
- </body>
- </html>
-
Now paste the following codes into your style.css file
- *{
- margin: 0;
- padding: 0;
- box-sizing: border-box;
- text-decoration: none;
- font-family: Arial, sans-serif;
- }
- nav{
- position: fixed;
- top: 0;
- left: 0;
- width: 100%;
- padding: 20px;
- transition: all 0.4s ease;
- }
- nav.sticky{
- padding: 15px 20px;
- background: #206C79;
- box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
- }
- nav .nav-content{
- height: 100%;
- max-width: 1200px;
- margin: auto;
- display: flex;
- align-items: center;
- justify-content: space-between;
- }
- nav .logo a{
- font-weight: 700;
- font-size: 35px;
- color: black;
- }
- nav.sticky .logo a{
- color: #fff;
- }
- .nav-content .nav-links{
- display: flex;
- }
- .nav-content .nav-links li{
- list-style: none;
- margin: 0 8px;
- }
- .nav-links li a{
- text-decoration: none;
- color: #0E2431;
- font-size: 18px;
- font-weight: 600;
- padding: 10px 4px;
- transition: all 0.3s ease;
- }
- .nav-links li a:hover{
- color: #4070f4;
- }
- nav.sticky .nav-links li a{
- color: #fff;
- transition: all 0.4s ease;
- }
- nav.sticky .nav-links li a:hover{
- color: #0E2431;
- }
- .home{
- height: 100vh;
- width: 100%;
- background: url("background.png") no-repeat;
- background-size: cover;
- background-position: center;
- background-attachment: fixed;
- font-family: 'Ubuntu', sans-serif;
- }
- h2{
- font-size: 30px;
- margin-bottom: 6px;
- color: #206C79;
- }
- .text{
- text-align: justify;
- padding: 40px 80px;
- box-shadow: -5px 0 10px rgba(0, 0, 0, 0.1);
- }
-
Now paste the following codes into your script.js file
- let nav = document.querySelector("nav");
- window.onscroll = function() {
- if(document.documentElement.scrollTop > 20){
- nav.classList.add("sticky");
- }else {
- nav.classList.remove("sticky");
- }
- }
If you face any difficulties while creating your Sticky Navigation Bar or your code is not working as expected, you can download the source code files for this Navigation by clicking on the download button.