In Today’s lesson, we are going to create Transparent Bootstrap Navbar. we are going to create this amazing transparent background bootstrap navbar. The bootstrap framework does not provide you predefined transparent background. It is not every time possible to create and insert png image in the project. So the way to achieve this is to use rgba color. Rgba color used for Transparent background for any element.

How to Create Transparent Bootstrap Navbar


So, following is the example to create this amazing transparent background navbar.

Create simple navbar

We first, create simple navigation bar and then apply the transparent effect to the navbar.

This is our Simple Navigation bar.

Create Navbar Transparent

Now, We want to create this Navbar transparently So we will create style tag in the head section and add some CSS code.So if we want to set an opacity of 80%, we would normally use 0.8 as our value

Make sure we have used the background image in this tutorial. We only need to change  background-image: url('pexels-photo-759059.jpeg');  property. In the url specify your background image absolute path.

You can change the rgba color. You can choose your rgba color from this website also RGBA COLOR CODES.  This works fine in Chrome, Safari and FireFox 3+ etc, however, our dear friend IE fails in all versions.

Complete HTML file looks like this.

Import this code into Your HTML file.

That’s it.

Now you are able to create transparent background navbar. So that’s all in this lesson.

See you in the next lesson.

If you have any problem or suggestion comment us. Follow us on Youtube, Facebook, and Instagram.

Thank You.