CSS Navigation Bar

This article is created to provide the tutorial along with examples on how to create and transform a boring navigation bar (list of links) into impressive navigation bar, step by step, using CSS.

Simple Navigation Bar without CSS

Before transorming the normal and simple navigation bar into a good-looking and eye-catching navigation bar. Let me first create a navigation bar using simple HTML Un-Organized list.

HTML Code

<!DOCTYPE html>
<html>
<body>

   <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Prices</a></li>
      <li><a href="#">Features</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">About</a></li>
   </ul>
   
</body>
</html>

Output

Remove Underline from Navigation Bar using CSS

To remove underline from navigation bar using CSS, use following CSS code:

a{text-decoration: none;}

For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      a{text-decoration: none;}
   </style>
</head>
<body>

   <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Prices</a></li>
      <li><a href="#">Features</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">About</a></li>
   </ul>
   
</body>
</html>

Output

Note - The text-decoration property is used to decorate the text.

To remove the marker, use/add following CSS code:

li{list-style-type: none;}

After adding the above CSS code, in previous example, the output changed to:

Note - The list-style-type property is used to define the type of list marker.

CSS Horizontal Navigation Bar

To align the navigation bar horizontally using CSS, use following CSS code:

li{display: inline;}

For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      ul{padding: 0;}
      li{list-style-type: none; display: inline;}
      a{text-decoration: none;}
   </style>
</head>
<body>

   <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Prices</a></li>
      <li><a href="#">Features</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">About</a></li>
   </ul>
   
</body>
</html>

Output

Note - The display property is used to define, how an element should render on the web page.

Create Horizontal Navigation Bar using CSS Flex

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      ul{display: flex; padding: 0;}
      li{list-style-type: none;}
      a{text-decoration: none;}
   </style>
</head>
<body>

   <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Prices</a></li>
      <li><a href="#">Features</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">About</a></li>
   </ul>
   
</body>
</html>

Output

Note - To learn about FlexBox model in detail, refers to its separate tutorial.

Use flex-basis property to set the initial length of flex items in flex container. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      ul{display: flex; padding: 0;}
      li{list-style-type: none; flex-basis: 16.6%; text-align: center;}
      a{text-decoration: none;}
   </style>
</head>
<body>

   <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Prices</a></li>
      <li><a href="#">Features</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">About</a></li>
   </ul>
   
</body>
</html>

Output

Create Horizontal Navigation Bar using CSS Grid

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      ul{display: grid; grid-template-columns: auto auto auto auto auto auto;}
      li{list-style-type: none;}
      a{text-decoration: none;}
   </style>
</head>
<body>

   <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Prices</a></li>
      <li><a href="#">Features</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">About</a></li>
   </ul>
   
</body>
</html>

Output

Note - To learn about Grid Layout Model in detail, refer to its separate tutorial.

Align Navigation Bar to Right using CSS

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      li{list-style-type: none; display: inline; padding: 12px;
         background-color: aliceblue; float: right;}
      a{text-decoration: none;}
   </style>
</head>
<body>

   <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Prices</a></li>
      <li><a href="#">Features</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">About</a></li>
   </ul>
   
</body>
</html>

Output

Note - The float property is used to define where the element should float.

CSS Top Navigation Bar

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      div.navbar{display: grid; grid-template-columns: auto auto auto auto auto auto;
         width: 100%;}
      a{text-decoration: none; background-color: purple; padding: 12px;
         text-align: center; color: white;}
      a:hover{background-color: aliceblue; color: purple;}
   </style>
</head>
<body>

   <div class="navbar">
      <a href="#">Home</a>
      <a href="#">Services</a>
      <a href="#">Prices</a>
      <a href="#">Features</a>
      <a href="#">Contact</a>
      <a href="#">About</a>
   </div>
   
</body>
</html>

Output

Note - The grid-template-columns property is used to define the number of columns to create in grid layout.

The exact layout of above navigation bar, can also be created using flex. Here is the CSS code:

div.navbar{display: flex; width: 100%;}
a{text-decoration: none; background-color: purple; padding: 12px;
   text-align: center; color: white; flex-basis: 16.66%;}
a:hover{background-color: aliceblue; color: purple;}

After applying this CSS code, in previous example. You will get the same output, as produced by the same (previous) example.

Let's create another layout and design for top navigation bar using CSS. Here is the code:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      ul{list-style-type: none; background-color: purple; overflow: hidden;
         margin: 0; padding: 0;}
      li{float: left;}
      li a{display: block; color: white; text-decoration: none; padding: 12px;}
      li a:hover{background-color: aliceblue; color: purple;}
   </style>
</head>
<body>

   <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Prices</a></li>
      <li><a href="#">Features</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">About</a></li>
   </ul>
   
</body>
</html>

Output

Note - The overflow property is used to control the overflowed content.

Align Particular Navigation Item to Right using CSS

To align any particular navigation item to right using CSS, you can approach any of the following two ways:

Using inline CSS
Using internal CSS

For both approach we need to use float: right CSS declaration. For example:

<li style="float: right;"><a href="#">Prices</a></li>

will align the Prices (a navigation item) to the right. Or we can follow the internal CSS to do the same job. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      ul{list-style-type: none; background-color: purple; overflow: hidden;
         margin: 0; padding: 0;}
      li{float: left;}
      li a{display: block; color: white; text-decoration: none; padding: 12px;}
      li a:hover{background-color: aliceblue; color: purple;}
      .right{float: right;}
   </style>
</head>
<body>

   <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Services</a></li>
      <li class="right"><a href="#">Prices</a></li>
      <li><a href="#">Features</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">About</a></li>
   </ul>
   
</body>
</html>

Output

CSS Vertical Navigation Bar

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      ul{list-style-type: none; background-color: purple;
         padding: 0; width: 120px; text-align: center;}
      li a{display: block; color: white; text-decoration: none; padding: 12px;}
      li a:hover{background-color: aliceblue; color: purple;}
   </style>
</head>
<body>

   <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Prices</a></li>
      <li><a href="#">Features</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">About</a></li>
   </ul>
   
</body>
</html>

Output

Align Vertical Navigation Bar to Center of the Screen using CSS

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      .center{width: 120px; margin: auto;}
      ul{list-style-type: none; padding: 0; text-align: center;}
      ul li{background-color: purple;}
      li a{display: block; color: white; text-decoration: none; padding: 12px;}
      li a:hover{background-color: aliceblue; color: purple;}
   </style>
</head>
<body>

   <div class="center">
      <ul>
         <li><a href="#">Home</a></li>
         <li><a href="#">Services</a></li>
         <li><a href="#">Prices</a></li>
         <li><a href="#">Features</a></li>
         <li><a href="#">Contact</a></li>
         <li><a href="#">About</a></li>
      </ul>
   </div>
   
   
</body>
</html>

Output

Change the CSS code from previous example with:

.center{width: 120px; margin: auto;}
ul{list-style-type: none; padding: 0; text-align: center;}
ul li{background-color: purple; color: white; margin-bottom: 6px;}
li a{display: block; text-decoration: none; padding: 12px; color: white;}
li a:hover{background-color: aliceblue; color: purple;
   border-bottom: 3px solid purple; padding-bottom: 9px;}

To get the following output:

CSS Online Test

« Previous Tutorial Next Tutorial »