How to create a responsive sticky navbar

How to create a responsive sticky navbar

How to create a responsive sticky navbar. In this tutorial, you will be made a responsive and sticky navbar.

What is the responsive sticky navbar?

Many developers agree navigation menu is one of the most important parts of a website. Even, it’s not always easy to access. Traditionally, users must scroll back to the top of the website to access the navigation menu. I newly questioned whether responsive sticky menus make websites quicker to navigate, and I carried a usability study to find the answer. Sticky/Affix or fixed navbar helps the user to access your website navigation menu easily.

In other words, it is available from wherever on the website without having to scroll. Although sticky and responsive navigation menu can be used to any menu, such as the footer, sidebar, or social media buttons, we’ll focus on the main navigation of a website like a Header Menu. The image below shows the difference between standard and sticky navigation on a mobile device.

How to create a responsive sticky navbar?

How to create a responsive sticky navbar

Responsive Fixed Navigation Menu 22% Quicker to Navigate.

Data shows on the websites with a fixed/sticky navigation menu are 22% quicker to navigate by reducing the need to scroll back to the top of the page. Many studies have pointed out that users favor a website with sticky navigation to one without it 100% of the time without being told of the difference between websites. All data support that your website should have sticky navigation so this article will show you how to do just that. So, now let’s take a look at the code.
Read Also: How to create a responsive mega menu?

HTML CODE:

<div class="soft-header">
  <h1>Soft CodeON</h1>
  <p>Learn Online Programming languages for free.</p>
</div>
<div id="fixed">
  <a href="#">Home</a>
  <a href="#">Services</a>
  <a href="#">Portfolio</a>
  <a href="#">Feedback</a>
  <a href="#">Contact Us</a>
</div>
<div class="content">
 <h1>Sticky Navigation Example</h1>
 <h1>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem </h1></div>

CSS CODE:

<style>
.soft-header { background-color: #f1f1f1;
padding: 30px;text-align: center;
}
#fixed {overflow: hidden;background-color: #9c286a;}
#fixed a { float: left;display: block;
 color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px;}
#fixed a:hover { background-color: #502075; color: #fff;}
.content { padding: 16px;}
.sticky { position: fixed;top: 0;width: 100%;}
.sticky + .content {padding-top: 60px;}
</style>

Javascript Code:

<script>
window.onscroll = function() {myFunction()};
var fixed = document.getElementById("fixed");
var sticky = fixed.offsetTop;
function myFunction() {
  if (window.pageYOffset >= sticky) {
    fixed.classList.add("sticky")
  } else {
    fixed.classList.remove("sticky");
  }}</script>

Well, First of all, you need to create a file like index.html. After that just copy all the above code one by one and put it into your HTML file, and then save it. Now a time to see the magic, open a file into your browser you will see a fixed/sticky/affix navigation menu. Please let’s know in the comment box how this article was helpful for you. Good Luck.

    Leave Your Comment

    Your email address will not be published.*

    E.g. "Muhammad Ali"
    E.g. https//softcodeon.com