How To Create A Fixed Bottom Menu Bar?

How To Create A Fixed Bottom Menu Bar?
170 Views

Hi guys. What’s up? Today I am going to share a small tip with you. Hope it will helpful. In this article I have added code for “Fixed Bottom Menu Bar”.

Let’s start.

Apply HTML

First Step: Add HTML structure at first.

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

</body>
</html>

Second Step: Add your navigation bar.

       <nav>
		<a href="#">Home</a>
		<a href="#">Blog</a>
		<a href="#">News</a>
		<a href="#">About Us</a>
		<a href="#">Contact Us</a>
	</nav>

Now you have to add a paragraph tag so that you can understand the fact.

<p>
		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>

We are all done. Time to apply CSS code.

Apply CSS

body,* {
			font-family: georgia;
		}

First Step: Add css code for navigation bar.

nav{
			padding: 20px;
			background-color: #000;
			text-align: center;
			bottom: 0px;
			width: 100%;
			position: fixed;
		}
		nav>a{
			padding: 20px;
			color: #fff;
			text-decoration: none;
			width: 100%;
		}
		nav>a:hover {
			  background-color: #ddd;
			  color: black;
			}

Second Step: Add css code for paragraph tag.

p{
				line-height: 100px;
				font-size: 25px;
			}

Now save this on your computer. Run it with browser. See? Isn’t it cool?

Stay connected for the next tutorial.

Related posts for you

Share Your Opinion With Me