How To Create A Sticky Nav Bar Without Javascript

How To Create A Sticky Nav Bar Without Javascript
299 Views

How To Create A Sticky Nav Bar Without Javascript?

hi, there, welcome back to anupdebnath.info. Today I am going to share a nice tip with you. In this tutorial you will learn how to make a sticky nav bar using only html and css.

Before Going to start, let’s see our preview.

How To Create A Sticky Nav Bar Without Javascript

So, what are you waiting for? Let’s start.

Apply HMTL Code.

First Step: Create the basic structure of html. Then save it.

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

</body>
</html>

Second Step: Create your heading section.

<h2>
<b>
How To Create A Sticky Nav Bar Without Javascript
</b>
</h2>
<p>
Scroll Down And See The Effect
</p>
<hr>

Third Step: You have added heading section. Now add navigation bar using html.

<!--- navigation bar code-->
	<nav >
		<a href="">Home</a>
		<a href="">Blog</a>
		<a href="">Portfolio</a>
		<a href="">Contact</a>
	</nav>

Fourth Step: Time to add some texts on our file to make it scroll-able.

<p class="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

So you are all done? Yeah, you have completed html part. Now add css code with it.

Apply CSS Code.

First Step: add css code for heading.

*,body{
font-family: georgia;
}
/* code for h2 tag */
h2{
font-size: 30px;
text-transform: uppercase;
padding: 25px;
text-align: center;
}
/* code for p tag */
p{
text-align: center;
font-size: 26px;
}

Second Step: Apply css code for navigation bar.

nav{
padding: 20px 20px;
text-align: center;
background-color: #10b7bf;
position: sticky;
top: 0;
}

nav>a{
padding:20px;
text-decoration: none;
color: #fff;
font-size: 20px;
top: 0;
}

Third Step: Add css code for p tag. Did you notice? I have added a class inside p tag. Write css code for this class now.

.text{
line-height: 105px;
}

See? You have done all of these. Now run your file with a browser and see the result.

Happy Coding.

Related posts for you

Share Your Opinion With Me