New and improved Bootstrap 5 menu bar

I am seeking to customize my navigation bar by adding a black background that spans its entire length. I do not want to rearrange the links or logo; just apply a background color.

Another issue arises during SASS compilation: I am trying to change the color to #141414 (not the default gray-900) by specifying it in the code, but despite successful compilation, the color does not update. How can I resolve this?

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="95f7fafae1e6e1e7f4e5d5a0bba5bba5b8f7f0e1f4a7">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">

    <title>Kurium Client</title>
    <style>
        .hidden {
            display: none;
        }
    </style>
  </head>
  <body>
      <div class="container bg-dark">
        <nav class="navbar navbar-expand-md navbar-dark">
            <a class="navbar-brand" href="#">
                <img src="logo.svg" alt="Bootstrap" width="200" height="30" class="d-inline-block align-top">
                <span class="hidden">Kurium Client</span>
              </a>
            <button 
                class="navbar-toggler" 
                type="button" 
                data-bs-toggle="collapse" 
                data-bs-target="#toggleMobileMenu" 
                aria-controls="toggleMobileMenu" 
                aria-expanded="false" 
                aria-label="Toggle navigation"
            >
            <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="toggleMobileMenu">
            
                <ul class="navbar-nav ms-auto text-center">
                    <li>
                        <a class="nav-link" href="#">Forums</a>
                    </li>
                    <li>
                        <a class="nav-link" href="#">Features</a>
                    </li>
                    <li>
                        <a class="nav-link" href="#">Purchase</a>
                    </li>
                    <li>
                        <a class="nav-link" href="#">Media</a>
                    </li>
                    <li>
                        <a class="nav-link" href="#">Contact</a>
                    </li>
                </ul>
                

            </div>
        </nav>
      </div>
      <div class="container">
          <a href="#" class="btn btn-dark">Learn more</a>
          <a href="#" class="btn btn-dark">Buy Now</a>
      </div>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ed8f8282999e999f8c9dadd8c3ddc3ddc08f88998cdf">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e784889582a7d5c9d1c9d7">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1d7f7272696e696f7c6d5d28332d332d307f78697c2f">[email protected]</a>/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script>
    -->
  </body>
</html>

htmlcssnavbarbootstrap-5

Answer №1

Initially, you are utilizing bootstrap.css from a content delivery network without referencing your custom css. Consequently, any changes made won't be visible.

Rather than replacing a color variable, it is advisable to introduce another color to the theme colors.

Bootstrap internally iterates through all colors in the map and generates corresponding component variants like navbar-dark, navbar-primary, etc.

As outlined in https://getbootstrap.com/docs/5.0/customize/sass/#add-to-map

You can define your custom color within a map

// Create your own map
$custom-colors: (
   "customgray": #141414
 );

Subsequently, merge your custom color map with the $theme-colors map like so:

$theme-colors: map-merge($theme-colors, $custom-colors);

However, keep in mind that you cannot import the entire bootstrap at once; each part needs to be imported individually.

// Necessary Imports

@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// It is recommended to place these lines in a _custom.scss file within your project
$custom-colors: (
   "customgray": #141414
 );

$theme-colors: map-merge($theme-colors, $custom-colors);

// Optional Imports
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
...

This approach allows you to utilize:

<nav class="navbar navbar-expand-md navbar-customgray">

Avoid using !important as it signifies an urgent need for attention from the developer, potentially leading them to exit the project.

To customize your CSS effectively, consider adding classes and creating new rules rather than resorting to important declarations.

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

When a button is undersized, the click event may not register

In my angular application, I have developed a directive for a tinyMCE editor. Upon setup, I have implemented two handlers: one for the blur event to hide the toolbar and another for the click event to show it. Additionally, I have created another directive ...

csstinymce

Is Intellisense within HTML not available in SvelteKit when using TypeScript?

Having trouble with intellisense inside HTML for a simple page component. Also, renaming properties breaks the code instead of updating references. Typescript version: 4.8.4 Below is the code snippet: <script lang="ts"> import type { Bl ...

htmltypescriptjsxsveltesveltekit

Having trouble getting a resizable DIV inside a 100% height DIV with margin to work properly. Any tips or assistance would be greatly

I've encountered a common issue that is slightly different from others I've come across. Despite my best efforts, I have been unable to find a solution on my own. If anyone could offer me some guidance on this, I would greatly appreciate it. The ...

csshtmlheight

Error: The symbol $ is not recognized

This is a snippet of code that I've written to automate address filling and extract latitude/longitude/address information. <html> <head> <LINK rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript" sr ...

javascriptjqueryhtmlgoogle-mapsgoogle-maps-api-3

Managing various dropdown select options in pure JavaScript

Consider the select element provided below: <select multiple="multiple"> <option value="car">car</option> <option value="scooter">scooter</option> <option value="bus">bus</option> </select> I ...

javascripthtml

The Window.print() function may experience compatibility issues across different browsers

When attempting to utilize the Window.print() function, I encountered an issue where it works perfectly in Google Chrome but not in Mozilla Firefox. Attached are screenshots displaying the problem at hand. What could be causing this discrepancy? Furthermor ...

javascriptcss

Is there a way to create a clickable component for triggering an AJAX call without using a Submit button?

Just starting out with JS/JQuery programming, so please excuse any mistakes or unclear explanations. Any feedback is welcome, even if not requested specifically. I am working with multiple drop down lists that are populated dynamically by data from SQL Ta ...

javascriptjqueryhtmlajax

The button in my form, created using React, continuously causes the page to refresh

I tried to create a chat application using node.js and react.js. However, I'm facing an issue where clicking the button on my page refreshes the entire page. As a beginner in web development, please forgive me if this is an obvious problem. You can fi ...

javascriptjqueryhtmlnode.jsreactjs

Accessing a JSON value in SCSS for localization

I have a JSON file containing all the values that I want to use for internalization in my app. On the HTML side, I am able to retrieve the values, but on the CSS side, I am using a "before" pseudo-element. In my HTML, I am using the class "menu-input" li ...

cssangular

SASS: a common thread connecting multiple applications

The scenario involves a web platform that aggregates various React apps, each with its own .scss files. The goal is to extract the common .scss into a library for convenience. Any suggestions on how best to accomplish this? It's important to note that ...

cssreactjsnpmsass

Icons that are clickable in ionic

I have successfully created a list card with 2 icons in each row. However, I am facing a challenge in making these icons clickable without disrupting the layout of the list. I attempted to add an ng-click to the icon element, but it did not work as expecte ...

cssangularjsionic-framework

Click here to access the identical page

Longtime follower of stackoverflow but only my second time posting a question. Here is the code I am currently working on: echo "<td><a href = 'http://localhost/map/index.php' value='$id' >Delete</a></td>"; ...

phphtml

Is there a way for me to view the table and information on this website?

Currently, I am in the process of extracting specific data from a table on the following website: . To achieve this, I have opted to use Python along with selenium. The issue arises when attempting to extract the table using read_html() from pandas. Unfor ...

htmlpandasseleniumbeautifulsoupselenium-chromedriver

How can I use a JavaScript or jQuery function to choose a specific audio track that is currently playing locally?

Currently, I have developed a music app that features local mp3 files triggered by clicking on divs which are linked to the audio using an onClick function with the play() method. Additionally, there is a scrolling screen that displays the song's arti ...

javascripthtmljqueryaudio

Is the <ul> tag aligning to the left?

I recently encountered an issue while designing my website. I created a div with a width of 200px on the right side of the webpage, and added a list of links within it. However, I noticed that elements inside the div are aligning slightly to the left, givi ...

htmlcss

Exploring ways to retrieve checkbox values instead of boolean values upon submission in Angular

I am currently working with a template-driven form and facing an issue. Despite receiving true or false values, I actually need to retrieve the value of checkboxes. <form #f = "ngForm" (ngSubmit) = "onClickSubmit(f.value)"> ...

htmlangulartypescript

Swapping out images by clicking on a thumbnail, featuring numerous occurrences on a single webpage

I'm currently working on a project where I need to display several large images with corresponding thumbnails. When a user clicks on a thumbnail, I want the larger version of that thumbnail to replace the current large image. While I have successfull ...

jqueryhtmlimage

The JavascriptExecutor is unable to access the 'removeAttribute' property of a null object

While utilizing Javascript executor to remove the readonly attribute, I encountered an error message: Cannot read property 'removeAttribute' of null. I came across various discussions where users suggested that removing AdBlock from Chrome solve ...

javascripthtmldomselenium-webdriver

Accessing a variable from an external JavaScript file using jQuery

Can someone help me out with this issue I'm facing? I am having trouble getting a string returned to a variable in my embedded Javascript code. token.js: function token () { return "mysecretstring"; } HTML Code: <!DOCTYPE html> <h ...

javascriptjqueryhtmlgetscript

Angular 6: A guide to dynamically highlighting navbar elements based on scroll position

I am currently building a single page using Angular 6. The page is quite basic, and my goal is to emphasize the navbar based on scrolling. Below is the code snippet I am working with: .sticky { position: sticky; top: 0; } #i ul { list-style-type: ...

htmlcssangulartypescript