Sign Up Now!
Hey guy, hope you are doing well. In this tutorial you will learn How to Change Bootstrap 5 Navbar Color. Now Bootstrap by default has only limited color options. In this tutorial, I will guide you through multiple ways how you can customize your Bootstrap 5 Navbar.
I have divided this tutorial into 3 different parts. In the 1st part, you will learn how to customize Bootstrap 5 navbar background color using the existing colors of Bootstrap. Like primary, secondary, and other colors. In the 2nd part, I will show you how you can custom with your own custom background colors. In the 3rd part, you will learn how to customize the dropdown of Bootstrap 5 navbar. That’s right. The dropdown does require separate customization.
Okay, let’s get started!
Throughout this step, you will learn how to change bootstrap 5 navbar color with default colors provided in the Bootstrap 5 itself.
Okay, the 1st thing that we need to do is to create the default navbar 1st, let’s create that:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg bg-body-tertiary border-bottom">
<div class="container">
<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 me-auto mb-2 mb-lg-0">
<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="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
<!-- Navbar -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Step 2: Adding Bootstrap Default Colors
To change the navbar color, you can modify the bg-body-tertiary class in the <nav> element. Bootstrap provides various background color classes that you can use. For example:
bg-primary: Blue backgroundbg-success: Green backgroundbg-warning: Yellow backgroundbg-danger: Red backgroundbg-info: Light blue backgroundbg-dark: Dark background
These are just a few to name. Choose the appropriate class based on your design preferences. Replace bg-body-tertiary with the desired class. For example:
<!-- Navbar -->
<nav class="navbar navbar-expand-lg bg-primary border-bottom" data-bs-theme="dark">What I have done here is, removed the bg-body-tertiary class, and replaced it with bg-primary, and also don’t forget to add the data-bs-theme="dark" attribute. This is what enables the dark-mode in the navbar.
Once you have done that, this is how your navbar will look:
Now you are free to experiment with different color classes that Bootstrap provides, until you find the one that suits your website’s design. Save the changes and refresh your webpage to see the updated navbar color.
In this part, let’s see how we can add custom backgrounds to our Bootstrap navbar by writing our own custom styles. Let’s get started.
Step 1: Add a Custom CSS File
Okay, the 1st thing that we need right now is to create a custom stylesheet. Create a new CSS file, for example, styles.css. Link this file in the <head> section of your HTML file after the Bootstrap CSS link. Make sure it’s below the Bootstrap CSS:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">Open your styles.css file and add the following CSS code to customize the navbar colors. You can customize or write your own CSS if you wish:
/* Custom Navbar Colors */
.navbar-custom {
background-color: #3498db; /* Replace with your desired background color */
}
.navbar-custom
.navbar-brand,
.navbar-custom
.navbar-nav
.nav-link {
color: #ffffff; /* Replace with your desired text color */
}
.navbar-custom
.navbar-toggler-icon {
background-color: #ffffff; /* Replace with your desired color for the toggler icon */
}
.navbar-custom
.navbar-toggler {
border-color: #ffffff; /* Replace with your desired border color for the toggler button */
}In this example, navbar-custom is a custom class that you can add to your <nav> element.
Update your navbar HTML code to include the navbar-custom class:
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-custom" data-bs-theme="dark">Once you have done that, your Bootstrap navbar should look like this:
You are now free to experiment with different color values to achieve the desired look for your navbar. Remember, if you want the search background to change, you can change it manually or you can change the data-bs-theme="dark" to dark or light based on your requirement.
Okay, that you are able to customize and change the background of Bootstrap navbar, you will notice that the dropdown color doesn’t change. For example, here’s what my dropdown looks like right now.
It’s dark because I used the data-bs-theme="dark" attribute. But, how do we change the dropdown color now. Let’s see how we can change the background of our Bootstrap 5 Navbar dropdown.
Okay, let’s get started on customizing the dropdown now.
Ensure that you have a dropdown menu in your navbar. I already have mine. Now in your custom CSS file (style.css), add the following styles to customize the background color of the dropdown when hovering:
/* Custom Dropdown Background Color on Hover */
.navbar-custom
.nav-item.dropdown:hover
.dropdown-menu {
background-color: #1a6da5; /* Replace with your desired background color */
}
/* Custom Text Color for Dropdown Items on Hover */
.navbar-custom
.nav-item.dropdown:hover
.dropdown-menu
a.dropdown-item:hover {
color: #ffffff; /* Replace with your desired text color on hover */
background-color: #0f4366; /* Replace with your desired background color on hover */
}That’s it. Now let’s see how our dropdown looks:
Awesome, we just modified the background color of our dropdown. In this example, replace #0f4366 with your desired background color. These styles target the dropdown menu when the corresponding navbar item is hovered.
Now you can feel free to adjust the color values and styles according to your design preferences.
🌟 Ready to level up your web design skills? Dive into the world of Bootstrap 5 with my Udemy course! 🚀 Unlock the secrets of creating stunning, responsive websites. Join now and let’s build something amazing together! 💻✨
Sign Up Now!
Leave a Reply