You can use a CSS media query to change styles based on the size of the screen.

If your navbar is an svg element (which it appears to be), then you’ll have to use the proper css properties to change these colors – such as fill.

Here’s an example. Try resizing the screen and see how it changes.

.navbar {
  fill: black;
}

@media screen and (max-width: 800px) {
  .navbar {
    fill: red;
  }
 }

<svg class="navbar" viewBox="0 0 100 80" width="40" height="40">
  <rect width="100" height="20"></rect>
  <rect y="30" width="100" height="20"></rect>
  <rect y="60" width="100" height="20"></rect>
</svg>

Add the attribute fill in to the opening <svg> tag and type in the colour you want.

<svg class="navbar" viewBox="0 0 100 80" width="40" height="40" fill="black">
  <rect width="100" height="20"></rect>
  <rect y="30" width="100" height="20"></rect>
  <rect y="60" width="100" height="20"></rect>
</svg>

This is what the code I have right now gives me.

Website

I want to change the color of:

3 bars

How do I change it?

That is the nav element thing i used. I don’t nessacary need navbar-dark as I already have css that makes the navbar custom colors but I don’t know how to change the color of the 3 bars.