Bootstrap 5汉堡菜单三条杠颜色无法修改问题求助

Hey, I’ve run into this exact issue before with Bootstrap 5’s hamburger menu! Since you already confirmed you’re targeting the right element (you changed the background and removed the border), the problem is that those three bars aren’t regular text or a border—they’re actually part of a background SVG image that Bootstrap uses for the .navbar-toggler-icon class. Here are a few solid solutions to fix this:

Method 1: Replace the Background with CSS Gradients #

This lets you directly define the bar color without messing with SVG. Just override the default background image with a linear gradient that mimics three horizontal bars:

.navbar-toggler-icon {
  background-image: linear-gradient(
    to bottom,
    #ff4500 0%, #ff4500 20%,
    transparent 20%, transparent 40%,
    #ff4500 40%, #ff4500 60%,
    transparent 60%, transparent 80%,
    #ff4500 80%, #ff4500 100%
  );
}

Replace #ff4500 with your desired hex color, and adjust the percentage values if you want thicker/thinner bars.

Method 2: Use CSS Filters to Adjust the Default Icon #

If you want a quick fix without rebuilding the icon, use filter properties to tweak the default gray icon’s color:

.navbar-toggler-icon {
  /* Example: Turn the default gray icon white */
  filter: invert(1) grayscale(100%) brightness(200%);
}

Play with the invert(), grayscale(), and brightness() values to get your perfect color. This works great if you just need a light/dark variant of the default icon.

Method 3: Custom SVG Background Image #

Bootstrap’s default icon is an SVG, so you can modify its stroke color and use it as a custom background. Remember to URL-encode the # in your color (replace # with %23):

.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='%232c3e50' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

Swap %232c3e50 with your URL-encoded hex color (e.g., %23ffffff for white).

Pro Tip #

Make sure your custom CSS has higher priority than Bootstrap’s default styles. You can do this by using a more specific selector (like .navbar-expand-lg .navbar-toggler .navbar-toggler-icon) or adding !important as a last resort (though it’s better to avoid !important when possible).

内容的提问来源于stack exchange，提问作者user9898421