Therefore, we only need to create navbar markup without adding bg-color class. Generally, the default Bootstrap navbar is transparent if there is no background color class defined in the navbar element. So, let’s get started on how to create a transparent navbar. If you are already familiar with Bootstrap then you will enjoy playing with the navbar coding. Basically, it is a defult Bootstrap navbar with some custom CSS. On the other hand, if you don’t have a navbar then you can check the demo of this project and consider it to use this navbar in your project. If so, add an id 'navbar' to your existing navbar and copy the JavaScript function given at the end of this tutorial. If you have already a navbar and wanted to change its color after some scrolling then you just need to add a little JavaScript function to your project.

In this tutorial, we’ll create a transparent navbar and make it solid on the scroll event.

As earlier we created shrinking navbar animation on scroll event, today we are back with a similar tutorial for the navbar animation. It looks really cool to trigger an animation on scroll event, especially for the navbar.

After effects change color of solid