Having difficulty customizing the background color of a navbar using CSS in Bootstrap 5

I've been attempting to customize the color of the navbar using a custom CSS code, but unfortunately without success. I've searched through various resources and tried different class names like navbar, navbar-custom, and more, but none seem to work.

HTML:

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Blog</title>
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6a0805051e191e180b1a2a5f445a445a47080f1e0b5b">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ccaea3a3b8bfb8beadbc8cf9e2fce2fce1aea9b8adfd">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="css/styles.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css" integrity="sha384-vSIIfh2YWi9wW0r9iZe7RJPrKwp6bG+s9QZMoITbCckVJqGCCRhc+ccxNcdpHuYu" crossorigin="anonymous">
</head>

<body>
  <section id="title">
  <div class="container-fluid">

    <!-- Nav Bar -->
    <nav class="navbar navbar-custom navbar-expand-lg">
      <a class="navbar-brand" href="#">Blog</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarTogglerDemo01">

        <ul class="navbar-nav ms-auto">
          <li class="nav-item">
            <a class="nav-link" href="#footer">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#pricing">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#cta">Contact</a>
          </li>
        </ul>
      </div>
    </nav>

  </div>

  </section>
</body>

</html>

CSS:

.navbar-custom{
  background-color: red;
}

Answer №1

Oops, I completely forgot to add the styles.css file into the css directory.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Stacking of div elements is not possible when they have a position relative

To summarize, I created a container div (parent) with a relative position and then added 3 children divs with absolute positions. Now, I am attempting to add another div that should appear below all of this content, essentially representing the next sectio ...

Guide to integrating jssor into an AngularJS application

Struggling to integrate jssor with angularjs, it seems to be failing because jssor is being initialized before angularjs, causing the ng-repeat elements to not resolve correctly. <div id="slider1_container"> <div u="slides"> <!-- Th ...

Looking to extract text between specific match groups using regex from an HTML YouTube page? Here's how you can do

Utilizing the power of Screaming Frog to extract keyword data from YouTube videos has its limitations. The software only displays 160 characters of meta information, which means videos with extensive keywords may not fully show up in this tab. Experimenti ...

The title in my div class doesn't seem to be properly centered, even though I have set the margin to auto. What steps can I take to correct this issue?

My div is set to have a margin:auto, but the h1 inside is not centered as expected. I've tried various solutions, but none seem to work. Can someone please help me get it centered properly? body { background: #5D6D7E; color: wh ...

Show the precise selection from one dropdown menu based on the chosen value in another dropdown menu

How can I retrieve the scheduleID value from a specific MovieID value within a comboBox? Movie Selection Box: <?php $query = "select * from ref_movies ORDER BY MovieID"; $result = mysql_query($query) or die (mysql_error()); echo '<s ...

Applying media queries to incorrect screen sizes

My media query seems to be behaving oddly. @media only screen and (max-width: 1200px) { .tool-panel { margin: 0px 24px 0px 0px; } } It is getting applied at 1183.20px instead of 1200px. This discrepancy is consistent across all browsers ev ...

The issue arises when attempting to render an SVG with JavaScript embedded inside using the img, object, or

Issue with the title ... please follow these steps: (view codes below) Create an svg + open it separately (name it keysaway.svg) Create html + open it individually When you observe, the svg displays a simple up and down animation but fails to work when l ...

Styling Your Website: Embrace CSS or Stick with Tables?

My goal is to create a layout with the following features, as shown in the screenshot: The main features include: The screen is divided into 3 regions (columns); The left and right columns have fixed widths; The middle column expands based on the browse ...

What is the best way to dynamically shift the position of an image on a page while keeping it in place in real-time?

A group of friends and I are currently collaborating on an experimental project for a presentation. Our goal is to have multiple elements (such as images, text, gifs) displayed on a page that can be dragged around in real-time using a draggable script whi ...

JavaScript button with an event listener to enable sorting functionality

I am looking to implement a button that will reset all the filters on my page. Any ideas? Currently, I have multiple radio buttons for filtering items based on price, size, and color. My goal is to create a reset button that will remove all filters and r ...

Tips for creating gaps between wells within a Bootstrap row

Utilizing bootstrap, I am aiming to position two wells side by side without them being squeezed right next to each other. However, I am encountering some issues with achieving this. Here's the code snippet I am currently using: <div class="contai ...

Encountering a malfunction in executing the AngularJS controller file

In the project run with http-server and node.js, the angular controller is unable to connect with index.html. classifieds.js (function() { "use strict"; angular .module("ngClassifieds") .controller("ClassifiedsCtrl", ['$scope', ...

An unusual outcome occurred while attempting to duplicate the text

After copying the letter A, I noticed that an empty string is being logged to the console instead of the expected A. However, when I paste, the console does successfully log the letter A. document.addEventListener('copy', handler); document ...

Guide on displaying gallery images when clicking on a specific class

I am in the process of developing a gallery tab for a website, initially displaying three thumbnails. The goal is to reveal the remaining thumbnails when a class named show-all is clicked. I have successfully animated the gallery's height to show the ...

Problem involving non-breaking spaces

After changing the font-family of my website from Gotham Pro to Gotham, I encountered an issue with the styling of numbers that were formatted using my currency formatter function. Strangely, when the &nbsp character is removed, everything appears to b ...

Continuously make Ajax requests to populate numerous div elements

There are two div elements present on my webpage. <div id="1"></div> <div id="2"></div> I am attempting to dynamically populate these divs using the following php call. <script> var queries = ["SELECT * from table1", "S ...

Is it advisable to store JSON data in data params instead of making an AJAX call?

Previously, I stored my component data within the element's data parameter. Should I continue doing this or switch to using an Ajax call to fetch the data? 1. Using data parameter: <a href="#" data-core="{JSON-data}" id="item-1"> <a href ...

Create a stylish frame for designated rows within a table

Col1 Col2 Col3 Col4 Col5 Col6 Row11 Row12 Row13 Row14 Row15 Row16 Row21 Row22 Row23 Row24 Row25 Row26 Row31 Row32 Row33 Row34 Row35 Row36 Looking for a way to add a border around rows with matching values in the first column, or around a specif ...

Should position: absolute; be utilized in asp.net development?

I am just starting out in web development Would it be a good idea to utilize position: absolute; for controls? If not, can you explain why? ...

Chrome not displaying fonts properly

Having a font issue in Chrome where specifying "Myriad Pro", Tahoma, Arial results in weird symbols. Works fine in FF, IE, and Safari. Using font-family: Tahoma, Arial; works for all browsers including Chrome. How can Myriad Pro be achieved for IE, FF, a ...