PUBLISHED ON: AUGUST 7, 2021
How to create a transparent navbar using Bootstrap 5?
The Bootstrap 5 Navbar is used as website headers to navigate between the pages. The Bootstrap provides various classes to style the navbar. The background color of the navbar can be changed using background-color utilities. We can also create a transparent navbar. But before that let us create a simple navbar with few items within it.
Default Navbar
Bootstrap 5 provides a number of classes used to create a navbar as per our requirements.
The .navbar class is used within <nav> element to create a navbar.
- The .navbar is wrapped with navbar-expand-{sm, md, lg, xl, xxl } for responsive collapsing and color schemes classes.
- Use the .container class to control the width of the navbar. Use .navbar-brand to add a website, product, or company name.
- Use .navbar-nav for full-height and lightweight navigation.
- Use .navbar-toggler to add the collapse the navbar <button>.
- Use .navbar-item to add items to the navigation.
- Use .navbar-link to add links within .navbar-item.
- The .navbar-light and .bg-light is used to change the color theme of navbar.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-secondary ">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Course</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="bg-light">
<h2> Scroll </h2>
<h2> scroll </h2>
<h2> Scroll </h2>
<h2> scroll </h2>
<h2> Scroll </h2>
<h2> scroll </h2>
<h2> Scroll </h2>
<h2> scroll </h2>
<h2> Scroll </h2>
<h2> scroll </h2>
<h2> Scroll </h2>
<h2> scroll </h2>
<h2> Scroll </h2>
<h2> scroll </h2>
<h2> Scroll </h2>
<h2> scroll </h2>
<h2> Scroll </h2>
<h2> scroll </h2>
<h2> Scroll </h2>
<h2> scroll </h2>
</div>
</body>
</html>
Output
Here is the output of a simple navbar.
Creating a transparent navbar using Bootstrap 5
As we can see that the above navbar is not transparent. To create a transparent navbar just remove the .bg-secondary from the .nav class. See the below code.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar fixed-top navbar-expand-lg navbar-light ">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Course</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="bg-light">
<h2> Scroll </h2>
<h2> scroll </h2>
<h2> Scroll </h2>
<h2> scroll </h2>
<h2> Scroll </h2>
<h2> scroll </h2>
<h2> Scroll </h2>
<h2> scroll </h2>
<h2> Scroll </h2>
<h2> scroll </h2>
<h2> Scroll </h2>
<h2> scroll </h2>
<h2> Scroll </h2>
<h2> scroll </h2>
<h2> Scroll </h2>
<h2> scroll </h2>
<h2> Scroll </h2>
<h2> scroll </h2>
<h2> Scroll </h2>
<h2> scroll </h2>
</div>
</body>
</html>
Output:
Here is the output of the above program.
