Responsive Navbar With Dropdown And Scroll Effects Using Bootstrap 4

Learn how to build a responsive navbar with dropdown menus, scroll effects, and color change on scroll using Bootstrap 4.

Responsive Navbar With Dropdown And Scroll Effects Using Bootstrap 4

This Responsive Navbar is built using HTML, CSS, MDB Bootstrap 4, and Bootstrap components to create a modern navigation system with dropdown menus, sticky scroll effects, and dynamic color changes. The design provides a professional user experience by keeping the navigation bar visible while scrolling and adding interactive hover menu functionality.

The project uses Bootstrap 4 responsive utilities along with custom CSS effects to create smooth transitions, hover dropdown menus, and color-changing navbar behavior on scroll. The layout is fully responsive and optimized for desktops, tablets, and mobile devices, making it suitable for modern websites and web applications.

Steps to Create a Responsive Navbar With Scroll Effects

Follow these simple steps to build a sticky navigation bar with dropdown menus:

Create a project folder, for example, responsive-navbar-scroll-effects.
Inside the folder, create three files: index.html, style.css.
Add the Bootstrap 4 and MDB Bootstrap CDN links to your HTML document.
Create the navigation bar structure using Bootstrap 4 components.
Add dropdown menu items and organize navigation links.

                            
                                <!DOCTYPE html>

<!-- TheProviders ----------------- youtube.com/@TheProvidersOfficial -->


<html>
<head>
	<title>Sticky Navbar on Bootstrap 4</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
<!-- Google Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap">
<!-- Bootstrap core CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.19.1/css/mdb.min.css" rel="stylesheet">
<!-- JQuery -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.19.1/js/mdb.min.js"></script>

</head>
<script type="text/javascript">
  $(window).scroll(function(){
  $('nav').toggleClass('scrolled', $(this).scrollTop() > 100);
  });
</script>

<body>
  
  <nav class="navbar navbar-expand-lg navbar-dark fixed-top">
 
 <a class="navbar-brand ml-5 font-weight-bold" href="#" style="font-size: 35px;">The Providers</a>

 <!-- Collapse Button -->

 <button class="navbar-toggler" type="button" data-toggle="collapse" aria-expand="false" aria-label="Toggle navigation" data-target="#exnavbar" aria-control="exnavbar">
   <span class="navbar-toggler-icon"></span>
 </button>

<!--  Collapsible Content -->

<div class="collapse navbar-collapse pr-5" id="exnavbar">

   <!-- Links -->

   <ul class="navbar-nav ml-auto mr-5 pr-5" style="font-size: 19px;">

    <li class="nav-item">
      <a class="nav-link" href="#">Home</a>
    </li>
     
     <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" id="navbardropdownlink" data-toggle="dropdown" aria-haspopup="true" aria-expand="false">About</a>
      <div class="dropdown-menu dropdown-primary" aria-label="navbardropdownlink">
        <a class="dropdown-item" href="#">FAQ</a>
        
      </div>
       
     </li>

     <!-- More Dropdowns -->
     <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" id="navbardropdownlink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"  href="#" >Portfolio</a>

      <div class="dropdown-menu dropdown-primary" aria-labellebdy="navbardropdownlink">
        <a class="dropdown-item" href="#">Web desiging 1</a>
        <a class="dropdown-item" href="#">Web desiging 2</a>
        
      </div>
       
     </li>
     <li class="nav-item">
       <a class="nav-link" href="#">Contact</a>
     </li>
   </ul>
  
</div>
    
  </nav>

  <div style="margin-top: 23%;text-align: center;color: white;" >
    <h1 class="font-weight-bold" style="font-size: 50px;">WELLCOME</h1>
    <h4>Free Source of Prodigious Codding for EveryOne</h4>
  </div>
</body>
</html>

Apply custom CSS styling for hover effects and responsive layouts. Implement sticky navbar functionality with scroll-based color changes. Add smooth transitions and interactive effects for a professional appearance. Save the files and open the project in a browser to test the final navbar design.

                            
                                <style>
/*Sticky Navbar with Hover dropdown*/

body{
  background-image: url(img1.jpg);
  background-size: cover;
  height: 120vh;
}
.nav-link{
  font-size: 20px;
  margin-left: 20px;
  font-weight: bold;
}

.dropdown-menu{
  animation-name: atthover;
  animation-duration: 1s;
  animation-iteration-count: finite;
}

.dropdown:hover{
  animation-play-state: running;
}
.dropdown:hover> .dropdown-menu{
  display: block;
}

.dropdown-item:hover{
  background-color: #ccc;
}

@keyframes atthover{
  0%{
    opacity: 0;
    margin-top: 30px;
  }
  50%{
    opacity: 1;
    margin-top: 0px;
  }
  100%{
    opacity: 100%;
  }

}

.navbar-dark.scrolled{
  background: #4a4847;
  transition: .5s ease-in-out;
}
</style>

Download Code Files