Navbar Transparent to Solid on Scroll using CSS

It looks really cool to trigger an animation on scroll event, especially for the navbar. As earlier we created shrinking navbar animation on scroll event, today we are back with a similar tutorial for the navbar animation. In this tutorial, we’ll create a transparent navbar and make it solid on the scroll event.

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. If so, add an id "navbar" to your existing navbar and copy the JavaScript function given at the end of this tutorial.

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. Basically, it is a defult Bootstrap navbar with some custom CSS. If you are already familiar with Bootstrap then you will enjoy playing with the navbar coding. So, let’s get started on how to create a transparent navbar.

How to Create Transparent Navbar

Generally, the default Bootstrap navbar is transparent if there is no background color class defined in the navbar element. Therefore, we only need to create navbar markup without adding bg-color class. So, in the very first step, load the Bootstrap framework and jQuery into the head tag of your HTML page.

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Bootstrap JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

After loading the Bootstrap and jQuery now we are ready to build the navbar. So, create a bootstrap default navbar component with an id "navbar" and place your navigation links inside it.

<div class="navbar navbar-fixed-top container-fluid" id="navbar">
  	 <div class="navbar-header">
      <button type="button" class="navbar-toggle navbar-default" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand">Brand</a>
    </div>
    <div class="collapse navbar-right navbar-collapse" id="myNavbar">
    	<ul class="nav navbar-nav">
    		<li>Home</li>
    		<li>About</li>
    		<li>Contact</li>
    		<li>Login</li>
    		<li>Signup</li>
    	</ul>
    </div>
  </div>

Of course, you need to have content on the page along with the navbar. Therefore, create a div element with a class name "para" just after the above navbar HTML code.

<div class="para">
  <h3>Your page content goes here...</h3>
</div>

Styling Navbar with CSS

As we have created Bootstrap default navbar, it is already styled in Bootstrap CSS. Anyhow, we’ll define some CSS styles in order to customize it.

Maybe you don’t need to set the background image for the body, but if you want to make the whole page just like the demo then define the following CSS styles for the body.

body{
   background: url(https://images.pexels.com/photos/414102/pexels-photo-414102.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
   background-size: 100%;
   background-repeat: no-repeat;
   background-attachment: fixed;
}

In order to make the fixed navbar use the CSS position property and set its fixed value. Similarly, define the transition for the smoothly change the background color.

.navbar{
  position: fixed;
  transition: 1s;
}

After that, target the "navbar-brand" and define its color, font size, and font-family property. If you have placed the image logo inside this div container then you can skip these styles.

  .navbar-brand{
  		color: #fff;
  		font-size: 45px;
  		font-family: Germania;
  		cursor: pointer;
  	}
  	.icon-bar{
  background-color: #000;

}

The "nav" class is the wrapper element for the navigation links. Define the font family, color and padding property as mentioned below:

.nav{
   font-family: Lithos Pro;
   color: #fff;
   padding: 10px 20px;
}

Similarly, target the "li" element of nav class and define padding, cursor style, and font size. You can set the custom values for these attributes in order to customize the links.

.nav li{
    padding: 10px;
    cursor: pointer;
    font-size: 16px;
}
.nav li:after{
  content: '';
  display: block;
    border-bottom: 2px solid #38fd07;
    transform: scaleX(0);
    transition: .2s ease-in-out;
}
.nav li:hover:after{
   transform: scaleX(1);
}

The following are some basic CSS styles for page typography and scroll bar. We defined 500px minimum height for the "para" class (page content area) to make the page scrollable. You can set the custom values for typography or skip these styles.

.para{
  min-height: 500px;
}
.para h3{
  text-align: center;
  margin-top: 15%;
  color: #fff;
  font-family: nyala;
  font-size: 44px;
}
    body::-webkit-scrollbar-track
{
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  
}
body::-webkit-scrollbar
{
  width: 14px;
}

body::-webkit-scrollbar-thumb
{
  
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.5);
  background:  #501e27;
}
@media(max-width: 720px){
  body{
    background-size: 100% 100%;
  }
  .navbar-collapse{
  background: #501e27;
}
  .para{
    min-height: 800px;
  }
}

Making Navbar Solid on Scroll

In order to change the background color of the navbar, we’ll define a JavaScript function. In the following function, we check if the windows scrolling position is greater than 20 then change the background otherwise keep the "none" background. You can set the custom value for the background color that you wanted to have when the navbar becomes solid.

<script>
    window.onscroll = function() {scrollFunction()};

function scrollFunction() {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    
    document.getElementById("navbar").style.background = "#501e27";
  } else {
   
    document.getElementById("navbar").style.background = "none";
  }
}
</script>

That’s all! Hopefully, now you are able to create a transparent navbar and convert into solid on scroll event. If you have any questions or suggestions, let me know by comment below.