Sticky Navbar With Hover Dropdown Menu Using Bootstrap 3

Learn how to create a sticky navbar with a hover dropdown menu using Bootstrap 3.

Sticky Navbar With Hover Dropdown Menu Using Bootstrap 3

This Sticky Navbar With Hover Dropdown Menu is built using HTML, CSS, and Bootstrap 3 to create a professional navigation system for modern websites. The design features a fixed navigation bar that stays visible while scrolling and includes hover-based dropdown menus for easy access to navigation links.

The project uses Bootstrap 3 components along with custom CSS styling to create smooth dropdown interactions and a responsive layout. The sticky navigation bar improves website usability while the hover dropdown menu provides a clean and intuitive user experience across desktops, tablets, and mobile devices.

Steps to Create a Sticky Navbar With Hover Dropdown Menu

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

Create a project folder, for example, sticky-navbar-hover-dropdown-menu.
Inside the folder, create two files: index.html and style.css.
Add the Bootstrap 3 CDN link to your HTML document.
Create the navigation bar structure using Bootstrap 3 components.
Add menu items and dropdown navigation links.

                            
                                <!DOCTYPE html>

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

<html>
<head>
	<title>Navbar</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>


	<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" 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" href="navbar.html">The Providers</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li ><a href="#" class="active">Home</a></li>
         <li class="dropdown">
        <a  href="#">Category
        <span class="caret"></span></a>
        <ul class="dropdown-menu" >
          <li><a class="dropdown-header">Shirts</a></li>
          <li class="divider"></li>
          <li><a href="#">Childs</a></li>
          <li><a href="#">Adults</a></li>
        </ul>
      </li>

        <li><a href="#">Contact us</a></li>
        <li><a href="#">About us</a></li>
        <li><a href="#">Policy</a></li>        
      </ul>
    </div>
  </div>
</nav>

</body>
</html>

Apply custom CSS styling to create hover dropdown effects. Make the navbar sticky so it remains visible while scrolling. Ensure the navigation bar is fully responsive for all screen sizes. Save the files and open the project in a browser to test the final navigation menu

                            
                                <style type="text/css">

body{
	background-image: url(image1.jpg);
	background-size: cover;
	height: 140vh;
}
.navbar-inverse{
	background: transparent;
	border-color:transparent;
}

.navbar-inverse .navbar-brand{
	color: #fff;
	font-family: monospace;
	font-size: 30px;
	margin-top: 5px;
	margin-right: 35px; 
}

#myNavbar .navbar-nav li a{
	color: #fff;
	font-size: 18px;
	font-family: monospace;
	margin-top: 5px;
	

}

#myNavbar .navbar-nav .active{
   	font-family: monospace;
   color: #00ffe1;
      font-size: 18px;
     font-weight: bold;
}

.dropdown{
	position: relative;
}
#myNavbar .dropdown-menu li a{
	color:  #000;
	font-size: 16px;
}
#myNavbar .dropdown-menu{
	display: none;
	position: absolute;	
    width: 100%;
  
}

#myNavbar .dropdown:hover .dropdown-menu{
	display: block;
	color: #000;

}
</style>

Download Code Files