How to Make a Navbar Transparent using CSS?

Navbars play an important role in every website because they help visitors easily find various categories of content. To make these navbars more attractive developers nowadays prefer transparent navbars over the normal ones.

In this tutorial, we will learn how we can make a navbar transparent using CSS.

The simplest way of making a navbar transparent is to use the RGBA color format to set its background color.

The RGBA color format gives you an additional parameter that lets you specify the color value with transparency. And this is done using the 4th parameter in the RGBA color format which accepts a value from 0.0 to 1.0.

Here, 0 means fully transparent and 1 means no transparency.

In the following example, we have set the transparency of the navbar to 0.3

Example:

body{
    background: url(images/sand.jpg);
    font-family:verdana;
    margin: 0;
}
.nav{
  width: 100%;
  background-color: rgba(0,0,0,0.3);  /* Set the transparency to 0.3 */
  overflow: hidden;
  
}
.nav a{
    padding: 14px 16px;
    float: left;
    text-decoration: none;
    color: #fff;
}
.nav a:hover{
  background-color:#fff;
  color: black;
}
.nav a.active{
    background-color:#088;
    color: white;
}