Bootstrap Navbar with Dropdown and Scroll Effects
Bootstrap Navbar with Dropdown and Scroll Effects
Today each and every website you go through in daily life have a proper navgation bar on the top so it easy for users to go on every page just by click. In this blog We build a professional navbar that have dropdown menu and also smooth scrolling effect. This Responsive Navbar with Dropdown and Scroll Effects is built using HTML, CSS, Bootstrap 4, to create a modern navigation system with dropdown menus, smooth transitions while scrolling. The responsive design ensures excellent usability on desktops, tablets, and mobile devices, making it ideal for business websites, portfolios, landing pages, blogs, and web applications.
This project we uses HTML to make webistes structure, Bootstrap 4 to provide responsive navigation components, dropdown menus, and mobile-friendly layouts, while CSS is used to customize the appearance with modern colors, hover effects, transitions, and scroll animations. Beginners can use this project to understand responsive navigation design, while developers and freelancers can customize the template and integrate it into professional websites to improve navigation and user interaction.
Responsive Navbar with Dropdown & Scroll Effects:
Bootstrap Responsive Navbar with Dropdown and Scroll Effects is a modern navigation component that combines responsive menus, expandable dropdown links, sticky positioning, and dynamic styling during page scrolling. As users scroll through the website, the navigation bar remains visible and changes its appearance to improve readability and enhance the browsing experience. In this project, HTML is used to create semantic navigation elements such as <nav>, <ul>, <li>, <a>, and <div>, while Bootstrap 4 provide responsive navigation components, dropdown functionality, and flexible layouts that automatically adapt to different screen sizes.
Custom CSS is used to create hover animations, smooth transitions, spacing, typography, and color-changing effects when users scroll through the page. Dropdown menus organize navigation links into categories, making large websites easier to navigate without cluttering the interface. The combination of responsive design, and interactive effects creates a modern navigation experience suitable for desktops, laptops, tablets, and smartphones while maintaining fast performance and clean code.
This project is an excellent learning resource for beginners who want to master responsive navigation using Bootstrap 4. It is also a practical template for students, freelancers, UI designers, and professional developers building corporate websites, admin dashboards, portfolios, eCommerce stores, or business applications. The well-structured source code allows you to easily customize colors, logos, menu items, dropdown categories, animations, and branding to match any website design.
Steps to Create a Responsive Navbar with Scroll Effects:
Follow these simple steps to build a responsive navbar with dropdown menus and scroll effects using Bootstrap 4:
- Create a project folder and name it responsive-navbar-scroll-effects.
- Inside the project folder, create two files named index.html and style.css.
- Add the Bootstrap 4 and MDB Bootstrap CDN links to your HTML document.
- Build the navigation bar using semantic HTML elements and Bootstrap 4 navigation components.
- Add navigation links and organize dropdown menu items for different website sections.
<!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 to create hover effects, responsive layouts, smooth transitions, and professional typography. Implement a sticky navigation bar with scroll-based color changes to improve the user experience while browsing. Test the navigation bar on desktops, tablets, and mobile devices to ensure a fully responsive layout. Save the project files and open index.html in your browser to view the final responsive navbar.
<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>
