Create a transparent navigation bar using CSS

Hey folks,
I am up with another tutorial of CSS. In this tutorial, we will learn how to create a transparent navigation bar using CSS. So you must have seen the navigation bar in almost every website. And you would be thinking it’s very tough.

Cascading Style Sheet(CSS) is useful for designing and styling our web page. Because we can make our web page more interesting with the help of CSS. We use external styling in CSS to create a navigation bar.

How to create a transparent navigation bar using CSS

So let’s start with this tutorial. We use the div tag to specify a particular section on our web page. And we give id inside the division tag to differentiate formatting effects between two div tags.

So we create a div tag first. And under it, we create a nav tag. It is used to create a set of navigation links on our web page. Inside it, we create few links inside it using an ordered list.

Creating navigation.html file

<html>
<head>
<title>CSS Navigation</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="abc">
    <nav>
        <ul>
            <li><a href="#">Discover</a></li>
            <li><a href="#">Home</a></li>
            <li><a href="#">Airways</a></li>
            <li><a href="#">Book Tickets</a></li>
            <li><a href="#">Contact Us</a></li>
        </ul>
    </nav>
</div>
</body>
</html>

In this code, we have used <a> because it creates a link. And it opens another web page when clicked, to the page it is referred to. We use the link tag to create a link between Html and CSS file.

Creating a style.css file

We use * to set default property for the whole page. And we can also set the font of your choice. Padding is the space created around an object. We use # to apply formatting effects to a division tag. Where we write id name after the hashtag.

Height is specified in terms of vertical height ex 100vh. So to fit the image in our screen we write background-size: cover. To apply effects on navigation bar we write nav{}. We use line-height: 50px to bring our links to the centre.

*{
  margin:0;
  padding:0;
  font-family:verdana;
}
#abc{
  width:100%;
  height:100vh;
  background-image: url(img2.jpg);
  background-size: cover;
}
nav{
  width: 100%;
  height: 50px;
  background-color: #0005;
  line-height: 50px;
}
nav ul{
  float: right;
  margin-right: 30px;
}
nav ul li{
  list-style-type: none;
  display: inline-block;
  transition: 0.7s all;
}
nav ul li:hover{
  background-color:#088;
}
nav ul li a{
  text-decoration: none;
  color: #fff;
  padding: 30px;
}

But to apply effects on the ordered list we use nav ul{}. To align our tabs to right we use float keyword. And to apply effects on li tag we use nav ul li{}. We have set the display as an inline block because it makes our horizontal. If we remove this line our tabs will become vertical.




We use the transition keyword to slow hover effect on the dropdown. So we have used nav ul li: hover to create a hover effect on our links. As soon as we place our cursor on links background colour changes.

transparent navigation bar

And to make our navigation tab transparent we set the alpha value in #rcba as 5. It is also known as opacity value. Our web page looks like as shown in the picture above.

I hope you understood the code well. Feel free to ask your doubts in the comment section below.

You may also read,

 


Leave a Reply

Your email address will not be published. Required fields are marked *