How To Create A Navigation Bar On Image?

How To Create A Navigation Bar On Image?
159 Views

How To Create A Navigation Bar On Image?

We all know the importance of Navigation Bar. It shows the important links of a website. It is placed on the top of a web page.

No matter what it is. Today I am going to show you “How You Can Create A Navigation Bar On Image”.

Before going to start this tutorial let’s check the preview of it.

How To Create A Navigation Bar On Image?

See?

You need to create this with HTML and CSS.

Apply HTML Code

First step: Create your HTML structure at first and save it on your computer.

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

</body>
</html>

Second Step: Add an image now. And later add your navigation bar.

        <!-- image -->
	<img src="images/home-office-569359_960_720.jpg">
	<!--- navigation bar -->
	<nav>
		<a href="">Home</a>
		<a href="">Blog</a>
		<a href="">Portfolio</a>
		<a href="">Contact</a>
	</nav>

You are done. Time to apply css code.

Apply CSS Code

First Step: Add css code for image.

img{
	width: 100%;
	height: 650px;
	left: 0;
	top: 0;
	position: absolute;
	background-color: linear-gradient
}

Second Step: Add code for navigation bar.

/* navigation bar code */
	nav{
		padding: 25px 0px;
		text-align: center;
		position: absolute;
		top: 0px;
		left: 0px;
		width: 100%;
		background-color: transparent;
		box-shadow: 0 5px 10px 5px rgba(0,0,0,.2);

	}
	/* code for menu link */
	nav>a{
		padding:20px;
		text-decoration: none;
		color: #000;
		font-size: 20px;
		top: 0;
	}
	/* hover code for navigation bar */
	nav>a:hover{
		background-color: #000;
		color: #fff;
		transition: 0.3s;
	}

You are completed :). You are finished.

Hehe. Save all codes on your computer. Later run it via your browser. And see the twist. 🙂

Happy Coding. Hey I forget something to share with you.

I have made a video of this article. Watch it from here –

Related posts for you

Share Your Opinion With Me