How To Create A Sticky Nav Bar Using HTML CSS

HOW TO CREATE A STICKY NAV BAR USING HMTL AND CSS
262 Views

Navigation bar is an important part for a website. Actually in websites you will see different types of navigation bar. Some of these are sticky, some of these are not sticky. Again you will see some of these are in the center of the body of websites, some these are in the right side of websites, some of these are in the left side of websites.

For a better user experiment, people put important links as menu on nav bar.

Hi guys welcome to anupdebnath.info. In this article I am going to show you how to make sticky navigation bar using html and css.

How To Create A Sticky Nav Bar Using HTML & CSS

Before going to start this create a html and a css file. Later connect them with each other.

Apply HTML Code

First Step :: In this step I am going to create a html file. If you do not know how to create html file, you can check this code. Skip this step if you know it.

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>

</body>
</html>

Second Step :: In this step I am going to create the navigation bar. Write something if you want to keep before navigation bar like me. Let’s check how I make this.  ( Write code between body tag ).

<h2>
	Anup Deb Nath Rinku
</h2>
<h3>
	Blogger | Content Writer | Web Designer
</h3>
<div class="stickybar">
	<a href="">Home</a>
	<a href="">Portfolio</a>
	<a href="">Blog</a>
	<a href="">About Us</a>
	<a href="">Contact</a>
</div>

Do you notice I have a html class in div? We will apply css code for this class. Let’s see how does it look without applying css.

How To Create A Sticky Nav Bar Using HTML CSS
How To Create A Sticky Nav Bar Using HTML CSS

Isn’t it nice?

Apply CSS Code.

Time to add css code to make our complete sticky navigation bar.

First step :: I have added h2 and p in html. Apply css code for this.

h2,h3{
	text-align: center;
}
p{
	line-height: 85px;
	font-size: 25px;
}

Second Step :: Style html  class with css code.

.stickybar{
		position: sticky;
		position: -webkit-sticky;
		top: 0;
		background-color: #000;
		font-size: 20px;
		padding: 20px;
	}

Let’s see how it is looking. Yeah?

Opps. I forget to add something. There are anchor tags inside of my html class. Let’s finish it.

.stickybar>a{
		color: #fff;
		text-decoration: none;
		padding: 15px;
	}

Yeah. I am done dude. Let’s check the full demo of this. How is this? Coding is fun, isn’t it? :p :p If you like this comment below. If you think it is not so cool as your thought then describe your opinion regarding it on comment box.

Watch this video if you do not understand how to complete this.

Related posts for you

Share Your Opinion With Me