Responsive Sticky Navbar With Smooth Scroll Using Bootstrap 4

Learn how to create a responsive sticky navbar using Bootstrap 4, HTML, and CSS.

Responsive Sticky Navbar With Smooth Scroll Using Bootstrap 4

This Responsive Sticky Navbar is built using HTML, CSS, and Bootstrap 4 to create a modern navigation system that remains fixed at the top of the page while scrolling. The design improves website usability by keeping navigation links accessible and providing a smooth browsing experience for users.

The project uses Bootstrap 4 components and CSS techniques to create a sticky navigation bar with smooth scrolling effects without relying on jQuery or JavaScript. The layout is fully responsive and adapts perfectly to desktops, tablets, and mobile devices while maintaining a clean and professional appearance.

Steps to Create a Responsive Sticky Navbar

Follow these simple steps to build a sticky navigation bar with smooth scrolling:

Create a project folder, for example, bootstrap-4-sticky-navbar.
Inside the folder, create two files: index.html and style.css.
Add the Bootstrap 4 CDN link to your HTML document.
Create the navigation bar structure using Bootstrap 4 components.
Add navigation links for different page sections.

                            
                                <!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 CSS styling to make the navbar sticky at the top of the page. Implement smooth scrolling effects using CSS properties. Make the navigation bar fully responsive for all screen sizes. Save the files and open the project in a browser to test the final result.

                            
                                <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>

Download Code Files