Customizing Navbar Colors and Styles

Up to this point, you've learned how to create a basic Bootstrap navbar and incorporate additional components like dropdown menus and forms. You've already seen some options for customizing your navbar, and now it's time to delve deeper into making your navbar stand out with unique colors and styles. These customizations will help ensure that your navbar design aligns with the overall theme of your website.

In this lesson, you will learn how to customize the colors and styles of your Bootstrap navbar:

1. Changing Navbar Colors: You will learn how to change the background and text colors of your navbar. A common way to achieve this is by using Bootstrap's predefined classes, or you can create your own styles using CSS.

   Bootstrap provides a range of predefined classes for background and text colors. Here are some examples:

   XML

   <!-- Dark background with light text -->
   <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
       <!-- Navbar content goes here -->
   </nav>
   
   <!-- Light background with dark text -->
   <nav class="navbar navbar-expand-lg navbar-light bg-light">
       <!-- Navbar content goes here -->
   </nav>
   
   <!-- Primary background with white text -->
   <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
       <!-- Navbar content goes here -->
   </nav>
   
   <!-- Secondary background with white text -->
   <nav class="navbar navbar-expand-lg navbar-dark bg-secondary">
       <!-- Navbar content goes here -->
   </nav>
   
   <!-- Success background with white text -->
   <nav class="navbar navbar-expand-lg navbar-dark bg-success">
       <!-- Navbar content goes here -->
   </nav>

   In the above code:

   • navbar-dark: Ensures that the text color adapts well to dark backgrounds.
   • navbar-light: Ensures that the text color adapts well to light backgrounds.
   • bg-dark, bg-light, bg-primary, bg-secondary, bg-success: Set different background colors.
   • navbar-expand-lg: Makes the navbar responsive, expanding it for larger screens and collapsing it for smaller ones.

2. Customizing Styles with CSS: Additionally, you'll explore how to apply custom styles using your own CSS rules to have greater control over the appearance of your navbar.

   Here's an example:

   XML

   <!-- Custom CSS styles defined in a <style> tag or an external stylesheet -->
   <style>
       .custom-navbar {
           background-color: #ff5733; /* Sets custom background color */
           color: white; /* Sets text color */
           border-bottom: 2px solid #000; /* Adds a bottom border */
           padding: 10px; /* Adds padding around the navbar */
           font-size: 18px; /* Sets font size */
           font-weight: bold; /* Sets font weight */
           box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Adds a subtle shadow */
           transition: background-color 0.3s ease; /* Smooth transition effect */
       }
       
       .custom-navbar:hover {
           background-color: #ff4512; /* Changes background color on hover */
       }
   </style>
   
   <!-- Navbar element with custom styles -->
   <nav class="navbar navbar-expand-lg custom-navbar">
       <!-- Navbar content goes here -->
   </nav>

   In the above code:

   • .custom-navbar is a CSS class that sets a custom background color, text color, border, padding, font size, font weight, box shadow, and transition effect.
   • You define styles like background-color, color, border-bottom, padding, font-size, font-weight, box-shadow, and transition within a <style> tag or an external stylesheet.
   • The hover pseudo-class is used to change the background color when the user hovers over the navbar.
   • Apply the custom class by setting class="custom-navbar" on your <nav> element.
   • navbar-expand-lg: Ensures the navbar is responsive, expanding it for larger screens and collapsing it for smaller ones.