The color of the navbar-toggler-icon in Bootstrap cannot be altered

While working on customizing my Bootstrap 5 navbar, I encountered an issue with changing the color of the navbar-toggler-icon. The preset colors, navbar-light and navbar-dark, didn't align with my theme, so I attempted to change the color to pure white. Unfortunately, this approach did not yield the desired result. After searching online for a solution, I found that none of the suggestions I came across resolved my specific problem. It's puzzling to me why the icon refuses to change color, especially when it seems to work perfectly for others. Therefore, I'm reaching out here in the hope that someone might have a solution that fits my needs. Here is the relevant snippet of my HTML code:

      <nav class="navbar navbar-expand-lg py-0 px-3 fixed-top">
    <a class="navbar-brand" href="https://www.toleka.se/" target="_blank">
      <img src="https://www.toleka.se/_siteimages/favicon.ico" alt="toleka-logo" width="40" height="40" />
    </a>
    <button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="navbar-collapse collapse" id="navbar">
      <ul class="navbar-nav p-sm-4 p-md-0">
        <li class="nav-item">
          <a href="index.html" class="nav-link p-sm-3 fs-5 text-light">Home</a>
        </li>
        <li class="nav-item dropdown">
          <a href="html/industrisakerhet/industrisakerhet.html" class="nav-link p-sm-3 fs-5 text-light"> Industrial Security </a>
        </li>
        <li class="nav-item">
          <a href="html/trucksakerhet/trucksakerhet.html" class="nav-link p-sm-3 fs-5 text-light">Truck Safety</a>
        </li>
        <li class="nav-item">
          <a href="html/travers/travers.html" class="nav-link p-sm-3 fs-5 text-light">Gantry Cranes</a>
        </li>
        <li class="nav-item">
          <a href="html/logistikcenter/logistikcenter.html" class="nav-link p-sm-3 fs-5 text-light"> Logistics Center </a>
        </li>
        <li class="nav-item">
          <a href="html/informativa-losningar/informativa-losningar.html" class="nav-link p-sm-3 fs-5 text-light"> Informative Solutions </a>
        </li>
      </ul>
    </div>
  </nav>

I've attempted various methods such as adding filters in my CSS file and directly into the element itself, using !important, adjusting properties like border-color, outline-color, and color in my CSS with !important, but unfortunately, nothing has worked. I may be missing something simple, but regardless, I appreciate any assistance. Thank you.

htmlcsstwitter-bootstrapbootstrap-5

Answer №1

To customize the appearance of your SVG using CSS, you can adjust the background-image property and specifically target the stroke property within the SVG code.

Here are some color examples you can use:

  • Red: stroke='rgba(255, 0, 0, 1)'
  • Green: stroke='rgba(0, 255, 0, 1)'
  • Blue: stroke='rgba(0, 0, 255, 1)'
  • Yellow: stroke='rgba(255, 255, 0, 1)'
  • Orange: stroke='rgba(255, 165, 0, 1)'
  • Purple: stroke='rgba(128, 0, 128, 1)'
  • and more

Take a look at the code snippet below for a practical example:

.nav-item a {
  color: black !important;
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 0, 0, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap demo</title>
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fe9c91918a8d8a8c9f8ebecbd0ccd0cd">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>

<body>
  <nav class="navbar navbar-expand-lg py-0 px-3 fixed-top">
    <a class="navbar-brand" href="https://www.toleka.se/" target="_blank">
      <img src="https://www.toleka.se/_siteimages/favicon.ico" alt="toleka-logo" width="40" height="40" />
    </a>
    <button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbar">
        <span class="navbar-toggler-icon"></span>
      </button>
    <div class="navbar-collapse collapse" id="navbar">
      <ul class="navbar-nav p-sm-4 p-md-0">
        <li class="nav-item">
          <a href="index.html" class="nav-link p-sm-3 fs-5 text-light">Hem</a>
        </li>
        <li class="nav-item dropdown">
          <a href="html/industrisakerhet/industrisakerhet.html" class="nav-link p-sm-3 fs-5 text-light"> Industrisäkerhet </a>
        </li>
        <li class="nav-item">
          <a href="html/trucksakerhet/trucksakerhet.html" class="nav-link p-sm-3 fs-5 text-light">Trucksäkerhet</a>
        </li>
        <li class="nav-item">
          <a href="html/travers/travers.html" class="nav-link p-sm-3 fs-5 text-light">Travers</a>
        </li>
        <li class="nav-item">
          <a href="html/logistikcenter/logistikcenter.html" class="nav-link p-sm-3 fs-5 text-light"> Logistikcenter </a>
        </li>
        <li class="nav-item">
          <a href="html/informativa-losningar/informativa-losningar.html" class="nav-link p-sm-3 fs-5 text-light"> Informativa lösningar </a>
        </li>
      </ul>
    </div>
  </nav>
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ccaea3a3b8bfb8beadbc8cf9e2fee2ff">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7L+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
</body>

</html>

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

"Troubleshooting: Why Won't My Entire Div Display on the

Struggling with a website rebuild due to my limited knowledge of HTML/CSS. For some reason, this whole div section isn't showing up as it should. Here is the problematic div: <div class="container clearfix"> <div class="border-shade sli ...

htmlcss

Creating tilted divs with dynamic height to perfectly fit the content

I'm struggling to incorporate this design into my webpage; I can't seem to get the right div's height to match the left div as depicted in the second image. Can someone offer some assistance? Additionally, when viewed on mobile, the squares ...

htmlcssbootstrap-4

Display an image with HTML

My current project involves creating a chrome extension that will display a box over an image when hovered, while also zooming the image to 1.5 times its original size. In my research, I came across a similar example. .zoomin img { height: 200px; wi ...

javascriptjquerycsshtml

A step-by-step guide on uploading a CSV file in Angular 13 and troubleshooting the error with the application name "my

I am currently learning angular. I've generated a csv file for uploading using the code above, but when I try to display it, the screen remains blank with no content shown. The page is empty and nothing is displaying Could it be that it's not ...

javascripthtmlcssangular

Is there a way to transform this JavaScript function into a jQuery plugin?

Hey there! I've been using this JavaScript function to print a div, but now I realize that I need to switch to jQuery. Can someone lend a hand in helping me convert this to jQuery code? $(document).ready(function(){ function printData() { ...

jqueryhtml

Determining the position coordinates of an element in relation to the viewport using JavaScript, regardless of its relative positioning

I am currently developing a vueJs web application and I'm in need of determining the position of an element within my web app relative to the viewport itself, rather than its parent elements. I'm curious if there exists a function or property tha ...

javascriptcssvue.jsvuejs2

Mudblazor - Tap or click within the designated area to trigger the drag and drop functionality

I have incorporated the Mudblazor CSS framework into my Blazor WebAssembly project. Within the drag and drop zone, I have included a button that is supposed to remove each uploaded image. However, when I click on the remove button, it only opens up the fi ...

javascriptc#cssblazormudblazor

The header row in HTML tables sometimes vanishes unexpectedly after sorting the table

Upon filtering the table, I noticed that the header disappears sporadically. The issue is that the table header row should remain in place regardless of whether or not the characters used for filtering are present in the table rows. In Example 1: When fil ...

javascripthtmlpython-3.xchar

Calculating the calc()-expression in Fluid Typography Linear Transition

After exploring the technique demonstrated by Mike Riethmuller, which involves utilizing calc() to create a fluid font-size transition between a minimum and maximum value, I found the outcome obtained from calc() in the browser somewhat perplexing (and not ...

cssfont-sizetypographycss-calc

Div vanishes once SVG Gaussian blur is applied

I'm attempting to add a Gaussian blur effect to an element that contains some child nodes with content. In Chrome, I successfully applied the blur using the following style: -webkit-filter: blur(2px); Unfortunately, Firefox does not support thi ...

htmlcssfirefoxsvgsvg-filters

Switching the background color of a button on click and resetting the color of any previously clicked buttons (a total of 8

I'm struggling to implement a feature where only one button out of a column of 8 should be toggled yellow at a time, while the rest remain default green. Unfortunately, I can't seem to get the function to execute on click, as none of the colors a ...

javascriptcssnode.jsexpressnodemon

Modify only unprocessed text within the HTML content

Consider the following string: html_string = '<span><span class=\"ip\"></span> Do not stare <span class=\"img\"></span> at the monitor continuously </span>\r\n' I am looking to ...

htmlruby

Exploring the world of using Bootstrap containers, rows, and columns

I have a good grasp on containers and columns, but I am a bit confused about rows. The example below shows a 50/50 split. <div class="container"> <div class="row"> <div class="col-md-6"> 50 / 50 Content </ ...

htmlcsstwitter-bootstrap

"By setting the HTML input box to read-only, the JavaScript button has the

Check out this js fiddle demonstration: http://jsfiddle.net/YD6PL/110/ Here is the HTML code snippet: <input type="text" value="a" readonly> <input type="text"> <input type="text"> <div> <button class="buttons">c</button ...

javascripthtml

Troubleshooting Problems with CSS Media Queries on Various 1280 screens

I'm facing an issue with creating a responsive layout using CSS media queries to adapt to different screen resolutions. Even though I've set up Media Queries for specific resolutions like: /*1280 x 1024*/ /*1280 x 960*/ /*1280 x 800*/ /*1280 x 7 ...

htmlcssresponsive-designmedia-queries

Ensure that the standard icon is properly aligned with the stacked icon of equal size

Seeking guidance on aligning two icons to be the same size. Here is what I'm aiming for: https://i.sstatic.net/SHuH9.png However, in current development, they appear like this: https://i.sstatic.net/crfdl.png When attempting to resize the stack ic ...

htmlcssbootstrap-5font-awesome

The minimum height of the IE element could not fully expand within its flex container that was set to absolute positioning

Creating a webpage with a full-page layout using a content session that spans the entire height of its container is my current project. To achieve this, I have implemented the following: The content's container (div.inner) is set to be absolute-posi ...

cssgoogle-chromeflexboxcss-positioninternet-explorer-11

What is the best way to insert an image in front of text within a table cell that can be identified by its class name?

JavaScript Question: function addFlags(){ while(i < $('.tabledata').length){ var current_val = $('.tabledata').eq(i).text(); arr.push(current_val); $('.tabledata').eq(i).html("<img s ...

javascripthtmljquerycss

Retrieve the 'id' value located within the 'img' tag of HTML code by utilizing Beautiful Soup in Python

Given the following code snippet: id_image = soup.find_all("img")[2] print(id_image) The result is: <img id="nexperts-logo" src="images/nexperts.png"/> I am trying to extract and print only the id value, which is ...

pythonhtmlweb-scrapingbeautifulsoup

Transforming a Joomla template into a standard HTML template

I have a question about Joomla. Although I already have a Joomla template that was not originally intended for use with Joomla, I would like to utilize it as an HTML template so I can easily modify and edit it without using Joomla. Therefore, I am looki ...

phphtmljoomla