How To Create A Fixed Sidebar Using HTML & CSS

How To Create A Fixed Sidebar Using HTML & CSS
147 Views

When we make a template for a website, we need to create a sidebar specially for blogging sites. Some people love to have a fixed sidebar. Some people love to have scrolling sidebar. It is not a big deal at all.

Hi guys, welcome back to anupdebanth.info. Today’s discussion is-

How To Create A Fixed Sidebar Using HTML & CSS

Guys, let’s get started.

Add HTML

First Step :: At first, create your html file with your code editor. and write the basic structure of html.

<!DOCTYPE html>
<html>
<head>
	<title> How To Create A Fixed Sidebar </title>
</head>
<body>

</body>
</html>

Second Step :: Now you need to add your sidebar. Write the code showing below on your code editor.

<!-- create the sidebar -->
<div class="rightsideNav">
        <a href="#">Home</a>
	<a href="#">Blog</a>
	<a href="#">Contact Us</a>
	<a href="#">About Us</a>
</div>

Third Step :: Add some extra texts on body part. It will help you scrolling the page. write the code –

<div class="focus">
   <h2>
	<center>
	    This is a Demo
	</center>
   </h2>
   <hr/>
    <p>
	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    </p>
</div>

Now we have completed the HTML structure for fixed sidebar. Time to add some css codes.

Add CSS Code

Did you notice? I have added two classes on html. Just add css codes on these classes and you will be all done.

First Step :: Call the .rightsideNav. We need to work with it. Give its height, width, padding etc to style it. Write the code showing below on you code editor –

.rightsideNav{
	height: 100%;
	width: 160px;
	position: fixed;
	top: 0px;
	left: 0px;
	overflow-x: hidden;
	padding-top: 20px;
	z-index: 1;
	background-color: #111;
}

Second Step :: we gave anchor tags on our sidebar. now we need to write some codes for anchor tags. write down the codes –

/* Code For Anchor Tag */ 
.rightsideNav>a{
	text-decoration: none;
	padding:8px 8px 6px 16px;
	display: block;
	color: #818181;
	}
/* Code For Hover Effect */
.rightsideNav>a:hover{
	color: #fff;
	}

Third Step :: apply some css codes for body text part.

/* Code For Body Text */
.focus{
	margin-left: 165px;
}
.focus>p{
	line-height: 95px;
}

You are all done. Now refresh your browser and check the new outlook of your web page. Do you get the fixed sidebar?

Related posts for you

Share Your Opinion With Me