Modifying the Nav-Bar background color causes the hamburger icon to become invisible

Here's the code I'm working with:

<nav class="navbar navbar-expand-lg navbar-md-dark navbar-lg-light"  style="background-color: #11100b;" id="nav-mob">
    <div class="container">
        <a class="navbar-brand " href="#">
            <img src="./logo dark.png" id="logochange" width="150" alt="LOGO">
        </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>
</nav>

While the hamburger sign is clickable, it's not visible against the dark background. How can I change its color or make it brighter?

cssnavbarbootstrap-5hamburger-menuion-navbar

Answer №1

When using Boostrap, it comes with preset themes. Therefore, if you change the background theme, you also need to adjust the icon theme to match. For example, try using this class: "navbar navbar-expand-lg navbar-md-dark navbar-lg-dark"

Answer №2

It appears that the navbar classes provided are incorrect. Bootstrap does not offer specific responsive background classes such as "navbar-md-dark navbar-lg-light."

To correct this issue, change the navbar class to "navbar navbar-dark bg-dark".

Alternatively, you can write custom CSS to adjust the hamburger color based on your code.

.navbar-md-dark .navbar-toggler {
  color: rgba(255,255,255,.55);
  border-color: rgba(255,255,255,.1);
}

Answer №3

The .navbar-toggler-icon in Bootstrap is designed as a background element, making it difficult to customize the color.

If you're looking to change the color of your menu icon, check out this link for a variety of customizable options: https://www.flaticon.com/search?word=menü&type=icon

By signing up through the provided link, you'll have access to different menu icon designs that can be downloaded as PNG files and easily incorporated into your project.

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

Showing identification on the drop-down list

Within my dropdown menu setup, I am aiming to achieve a specific functionality. When the user clicks on sub menu, I want the title of sub menu to display in the Menu space as illustrated below. What steps can be taken to accomplish this? UPDATE: After fu ...

jquerycss

Switch the dropdown menu to a button if it consists of only one option

I have been using a database within the Moodle Learning Management System that generates a bootstrap table. Here is an example of what it looks like: https://i.sstatic.net/UJc4M.png The last row in the table contains a dropdown menu. When viewing your ow ...

javascripthtmlcsstwitter-bootstrap

What is causing the modal to fail to open when the button is clicked?

My HTML includes a modal that isn't functioning correctly. <!doctype html> <html lang="en"> <head> <title>Rooms</title> <meta charset="utf-8"> <meta name="viewport" conte ...

htmlbootstrap-5

The replacement of className in inline SVG is not permitted (Error: 'Cannot read property 'className.replace' of undefined')

I've hit a roadblock trying to manipulate classes within an SVG document to modify the rect elements. The code works smoothly on divs in an external document, but I've tried several other solutions as well – all listed below. I'm still rel ...

javascripthtmlcsssvg

One-of-a-kind Version: "Utilizing CSS to Capitalize an

Imagine having the following strings. i and we. me and you. he and she. Is it possible to achieve the desired result using PURE CSS? I and We. Me and You. He and She. If capitalizing the text using text-transform: capitalize is used, it will yi ...

jqueryhtmlcss

Arrow not appearing when hovering over navigation bar in Bootstrap 4

My navbar is not displaying the arrow even though I added class="dropdown-toggle" data-toggle="dropdown" from w3schools.com in my anchor tag. The hover effect works, but the arrow is still not showing. html file <div class="dropdown"> ...

htmlcsstwitter-bootstrapbootstrap-4

Slideshow through each item using Typescript and Angular8

I came across a solution in this carousel on by one link, but I'm struggling to work with the jQuery code even though I have JQuery installed in my project. For example: const next = jQuery(this).next(); I am looking to convert the JQuery code from ...

jquerycssangulartypescriptcarousel

How can I ensure that my content stays fixed at the bottom of a scrolling div in Material UI React?

I have developed a React JS component using Material UI that includes a chat input feature. However, I am facing an issue where the width of the chat input is always half the screen size on desktop or mobile devices. When I try to change the width to 100%, ...

htmlcssreactjsmaterial-ui

Modify the appearance of the username in the header after logging in with Yii

As a fellow coder using Yii, I'm seeking assistance in changing the style of my username displayed in the header upon login. Currently, it's appearing in black color and I desire it to be italicized-white. The code snippet below shows my header s ...

phpcssyii

The Conflict-Free Dilemma of JQuery Cycle

Everything was working smoothly with the implementation of the JQuery Cycle Plugin. However, as I attempted to link a separate JavaScript file for a Menu in the Head Section from this source , <script type="text/javascript" src="js/ddmegamenu.js"> ...

jquerycss

The class in my CSS is currently impacting all the menu bar items, but I specifically want it to only affect my photo gallery

<div class="gallery"> <a tabindex="1"><img src="images/smile.jpg"></a> <a tabindex="1"><img src="images/smile.jpg"></a> <a tabindex="1"><img src="images/smile.jpg"></a> ...

htmlcss

What's the reason for my badge being an oval shape?

I am attempting to design a badge that hovers above my cart icon and shows the total number of items currently in the cart. However, I have encountered an issue where the badge appears as an oval shape rather than a perfect circle. Can anyone assist with ...

cssreactjs

What is the best way to retain the background image in a fixed position?

Is there a way to fix the size of the picture in my code? The current size is 5834*3886, but when I minimize the browser, part of it disappears. Here is the CSS code I have written: .contact{ position: relative; min-height: 100vh; padding: 50 ...

cssbackground-image

Switch the background color of the checkbox div or label with a single click

I have successfully implemented the following code, with one small issue. When I select the checkbox, the background color of the div changes from #fff to #ffe600 as expected. However, after submitting the form and refreshing the page, the background color ...

javascriptjqueryhtmlcsscheckbox

What is the best way to ensure that the video width is fully responsive at 100%?

Looking for help with making a Shopify website more responsive. I have a hero video at the top, but it's leaning to the right and leaving a blank space on the left. Can anyone assist me in making it 100% responsive without much coding knowledge? I&apo ...

htmlcssvideoresponsive-images

In which orientation does the iPad come configured as standard?

There seems to be some confusion regarding the default orientation of the iPad. While some believe it is portrait (which is how I typically use my iPad), others argue that it is actually landscape. In my CSS, I have specific settings for targeting elemen ...

ioscssipadios6orientation

HTML5 foundation

Just recently, I discovered HTML5 boilerplates and I am still a beginner when it comes to this. I decided to dive into experimenting with boilerplates and ended up downloading one from this site. However, I'm a bit confused about the download options ...

htmlcsshtml5boilerplate

Bootstrap - Utilizing a boxed grid within a div located in the .fluid-container

Can you please review these two images? I'm trying to place ".myDivInTheGrid" inside a boxed bootstrap div. Any ideas on how to do this? This is what I currently have... <div class="fluid-container"> <div class="col-md-6"></d ...

htmlcsstwitter-bootstrap-3

Issue with Angular table display cell overloading(produces excessive rendering of cells)

In my project, I am working with 3 arrays of data - DATA_CENT, DATA_NORTH, and DATA_WEST. Each of these arrays contains another array called data, which I need to extract and display in a table format. For each new column, I create a new table and then po ...

javascripthtmlcssangular

jQuery enigma - struggling to get slideUp/slideDown to function

My goal is to utilize jQuery and CSS to display the initial paragraph out of a set of four, and insert a link or button at the conclusion of the first paragraph. Upon clicking on the link or button, my aim is to reveal the remaining three paragraphs in a s ...

javascriptjquerycss