How To Create A Center Menu Bar Using HTML CSS?

How To Create A Center Menu Bar Using HTML CSS
340 Views

Menu bar is an important part of a webpage. Every website has menu bar. In general, there are 3 types of menu bar.

  1. Left side menu bar
  2. Right side menu bar
  3. Center menu bar

Few people use center menu bar. But the importance of menu bar cannot be denied at all.

Hi guys welcome back to anupdebnath.info. In this article i am going to show you a simple trick by which you can create a simple center menu bar. So let’s start.

We need to do something.

  1. First step is to check the preview of our center menu bar
  2. Second step is to apply html structure
  3. Third step is to apply css code

Let’s check the preview at first.

How To Create A Center Menu Bar Using HTML CSS
How To Create A Center Menu Bar Using HTML CSS

How To Create A Center Menu Bar Using HTML CSS?

Apply HTML Code

Let’s create the basic html structure.

<!DOCTYPE html>
<html>
<head>
	<title>Create a center menu bar</title>
</head>
<body>

</body>
</html>

Now add your navigation bar in body tag.

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

That’s it. We are all done. Our html structure for our center menu bar is ready. We just need to add css code.

Apply CSS Code

Let’s apply css for nav only.

nav{
	padding: 15px;
	background-color: #000;
	color: #fff;
	left: 0px;
	top: 200px;
	width: 100%;
	position: absolute;
	text-align: center;
}

Did you notice? I have added anchor tag inside my nav tag? Time to apply css for this.

nav>a{
	padding: 15px 16px;
	color: #fff;
	text-decoration: none;
	text-align: center;
}
nav>a:hover{
	color: #ddd;
	transition: 0.5s;
}

That’s all done. Now run this code on your browser. And check how it is looking. Nice? Perfect then.

Related posts for you

2 Thoughts to “How To Create A Center Menu Bar Using HTML CSS?”

  1. Thanks to share a create a center navigation manu bar to using html & css.

    At the present time, food lovers fans all provide food online.
    So they are brought online food delivery free service

Share Your Opinion With Me