HOW TO MAKE STICKY NAV BAR USING HTML AND CSS

If you are a web developer, you might know about the various navigation bar positioning techniques. Fixed, absolute, relative and static are widely used designs in web development and serve different purposes. But a relatively new position of menu bars is being seen in websites – you might have heard of it as the “Sticky nav bar.”

As intimidating as it might sound, the sticky navbar is a pretty basic design – it’s like a combined effect of relative and fixed positioning. This article will provide you with a guide on how to make a Sticky navbar using HTML and CSS. But first, let’s find out what it actually is!

What is a Sticky Nav Bar?

A Sticky navbar is a part of a graphical user interface that assists visitors in finding information by navigating through a list of hyperlinks. It is like a regular navigation bar used in file browsers, web browsers, and websites’ design components.

As the name implies, the Sticky positioning keeps the navbar in place when a specified threshold is reached while scrolling. Many people confuse sticky navbars with fixed navigation bars, but there is a slight difference between the two. With a fixed navbar, we define a position as absolute and identify a location where to fix it (i.e. top, bottom, left, and right). In contrast, with a sticky navbar, we specify the position as sticky and then identify the location where we want to make it sticky (i.e. top, bottom, left, and right). The default position of the sticky navbar is relative (that is, where it should be according to HTML flow), but as we scroll down the page, it will stick at the supplied location.

How to Make a Sticky Navigation Bar Using HTML and CSS?

Okay, so here is a brief on what we’ll be working on. The main idea is to create a navigation bar that is fixed when the screen is stationary and moves with us as we scroll down the page. The latter is particularly important; after all, we don’t want to hide our nav bar from the users because it serves as a navigation aid. So, instead of allowing the navigation bar to scroll outside the browser viewport, we’ll keep it at the top. In this way, when we scroll up, the webpage contents will also scroll up, with the bar remaining visible at the top.

That said, it’s time to start coding!

Step 1: Creating a Simple Navigation Bar Menu

We can’t work on a sticky navigation bar without having a navigation menu. So, the first part is to create a navigation menu. You can achieve this by creating a series of hyperlinks. Here is an example of adding anchor tags to your HTML:

<a href=”#contact”>Contact</a>

</div>

Step 2: Styling the Navigation Menu

The above mentioned code will give us a navigation menu fixed at the top of the page since we have currently only used simple default hyperlinks. The next step will be to style our navigation bar and give it a background color using CSS:

.sticky-section{

overflow: hidden;

background-color: #09689E;

margin-bottom: 50px;

width: 100%;

color: white;

}

Step 3: Refine it

Our background is now suitable for a fixed navigation bar. But the default look of the hyperlinks doesn’t look much appealing. So, now it’s time to refine the look:

nav a{

float: right;

text-decoration: none;

color: white;

font-size: 18px;

padding: 20px 30px;

display: inline-block;

transition: all 0.5s ease 0s;

}

Step 4: Remove the Default Margin

I’ve made the menu float to the right with the above CSS and added some padding and sizes. Text-decoration: none removes the hyperlink’s default appearance. And, as we change styles when hovered, the transition property is only a warm-up for animation effects.

The only thing remaining now is removing the margin that the browser has set to our block:

body{

margin: 0;

padding: 0;

}

Step 5: Make the Nav Bar Sticky with CSS Position

These four steps conclude our creating a Nav Bar in HTML and CSS. We still haven’t added the sticky CSS feature you are here for. So, the wait is over! This is the section where we give the navigation bar its sticky attribute. Here is the relevant code to get a Sticky navbar:

.sticky-section{

position: sticky;

position: -WebKit-sticky;

top: 0px;

}

We have successfully created a Sticky Nav Bar using HTML and CSS with this CSS. But creating one isn’t enough, right? So we will be sharing several other codes with you to make your Sticky navbar presentable:

Adding a Logo Text

All the items in your Sticky navbar will float to the left with these codes. We need to add something to the right to give it a balanced look. The savviest thing to do here is to add the logo to fill the barren space. Because we need the logo before the navigation menu items, we will add a logo text before declaring the nav block:

Styling the Logo Text

Again, the above mentioned code creates our logo text on the nav bar. But we have got to style it to make it look presentable. Here is how to style the logo text:

#logo{

font-size: 20px;

font-weight: bold;

float: left;

padding: 15px 15px;

}

That looks better! But wait – the logo text seems fixated to the corner. You can use this code to adjust the margins to the menu items effortlessly:

#logo{

margin-left: 16%;

}

nav{

margin-right: 17%

}

Adding the Hover Effect

Navigation bars with a hover effect make the web surfing experience a lot better. And since this is the main reason we are creating a Sticky navigation bar, we will teach you how to add the hover effect to it. Here is the code to achieve a hover effect on your Sticky navigation menu:

nav a:hover{

background-color: #002e5b;

colour: wheat;

}

With the above CSS, we have altered the background colour and text colour of the hyperlink that will appear as the pointer hovers over the nav menu. This is necessary for locating the mouse’s position on the screen.

You can apply many other CSS designs to your Sticky navigation bar, like creating a dropdown menu, but we won’t discuss that in this post.

Conclusion

I have often used sticky navigation bars in my work. First time I used it was on the Danish website: Promiz.dk. Sticky navigation bars are an excellent addition to home pages. They can persuade your visitors to scroll all the way down your page. In fact, after replacing their conventional top navigation menu with a sticky one, some companies reported a significant increase in engagement on their long-form homepages. This is where web design psychology and user experience come into play. Sticky menu components give users a sense of control while engaging with a website.

This guide on how to make a Sticky navbar using HTML and CSS is perfect for those who want to increase the usability of their web designs. Now that you have learned the steps, it’s time to start coding!