Responsive Sticky Navbar with Smooth Scroll Using Bootstrap
Responsive Sticky Navbar with Smooth Scroll Using Bootstrap 4
A sticky navigation bar is an important feature of modern websites because it keeps important menu links visible while users scroll through the page. This Responsive Sticky Navbar with Smooth Scroll is built using HTML, CSS, and Bootstrap 4 to create a professional navigation system that remains fixed at the top of the screen and provides smooth scrolling between different sections of the website. The responsive layout ensures excellent usability across desktops, tablets, and mobile devices, making it suitable for business websites, portfolios, landing pages, blogs, and other modern web projects.
This project uses HTML to build the navigation structure, Bootstrap 4 to create a responsive and mobile-friendly layout, and CSS to implement sticky positioning, smooth scrolling, hover effects, and modern styling without using jQuery or JavaScript. Beginners can learn how to build responsive navigation using Bootstrap 4, while developers and freelancers can easily customize and integrate this sticky navbar into existing websites to improve navigation and enhance the overall user experience.
Responsive Sticky Navbar with Smooth Scroll
A Responsive Sticky Navbar with Smooth Scroll is a navigation component that stays fixed at the top of the page while users browse the website, allowing quick access to important links without scrolling back to the top. Smooth scrolling creates a more polished browsing experience by animating navigation between page sections instead of jumping instantly to the selected content. In this project, HTML is used to create semantic navigation elements such as <nav>, <ul>, <li>, <a>, and <div>, while Bootstrap 4 provides responsive navigation components that automatically adjust to different screen sizes.
Custom CSS is used to make the navigation bar sticky using modern positioning techniques while also enabling smooth scrolling through the scroll-behavior property. Additional styling improves typography, spacing, colors, hover effects, and responsive layouts, creating a clean and professional appearance. Since the project does not rely on JavaScript or jQuery, it remains lightweight, fast-loading, and easy to customize for different website designs.
This project is ideal for beginners who want to learn responsive navigation using Bootstrap 4 and CSS. It is equally useful for students, freelancers, and professional developers looking for a reusable sticky navigation template for portfolios, corporate websites, landing pages, admin panels, or business applications. The simple code structure makes it easy to modify colors, menu items, logos, spacing, and branding to match any project.
Steps to Create a Responsive Sticky Navbar:
Follow these simple steps to build a responsive sticky navbar with smooth scrolling using Bootstrap 4:
- Create a project folder and name it bootstrap-4-sticky-navbar.
- Inside the project folder, create two files named index.html and style.css.
- Add the Bootstrap 4 CDN link to your HTML document.
- Build the navigation bar using semantic HTML elements and Bootstrap 4 navigation components.
- Add navigation links that point to different sections of the webpage.
<!DOCTYPE html>
<!-- TheProviders ----------------- youtube.com/@TheProvidersOfficial -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Sticky Navbar</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/mdb.min.css">
<link rel="stylesheet" href="Style.css">
<head>
<body>
<header>
<nav class="navbar fixed-top navbar-expand-md navbar-dark scrolling-navbar">
<a class="navbar-brand" href="#"><strong>The Provider</strong></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#Sticky-nav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="Sticky-nav">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a href="#" class="nav-link active">Home</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Contact</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">About</a>
</li>
</ul>
</div>
</nav>
<div class="view">
<div class="flex-center">
<a href="#scroll" class="btn btn-primary">Scroll Down</a>
</div>
</div>
</header>
<main class="text-center py-5" id="scroll">
<div class="container">
<div class="row">
<div class="col-md-12">
<p align="justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p align="justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
</main>
<!-- jQuery -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="js/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="js/mdb.min.js"></script>
<!-- Your custom scripts (optional) -->
<script type="text/javascript"></script>
</body>
</html>
Apply custom CSS to make the navbar sticky at the top of the page using position: sticky or position: fixed. Enable smooth scrolling using the CSS scroll-behavior: smooth property and add hover effects for better user interaction. Make the navigation bar fully responsive so it works perfectly on desktops, tablets, and mobile devices. Save the project files and open index.html in your browser to test the responsive sticky navbar with smooth scrolling.
<style>
html,body,header,.view{
height: 100%;
font-family: 'josefin sans', sans-serif;
scroll-behavior: smooth;
}
.top-nav-collapse{
background-color: indigo;
}
.view{
background: url(1.jpg) no-repeat center;
background-size: cover;
}
</style>
