Styling a navbar with html

1

Hi I would like to make my navbar gold on bootstrap using html but it does not work.

<nav class="navbar navbar-expand-lg navbar-light bg-light bg-warning">
	<button class="navbar-toggler ml-auto " type="button " data-toggle="collapse " data-target="#navbarNav " aria-controls="navbarNav " aria-expanded="false " aria-label="Toggle navigation ">
		<span class="navbar-toggler-icon "></span>
	</button>
	<div class="collapse navbar-collapse " id="navbarNav ">
		<ul class="navbar-nav ml-auto ">
		  <li class="nav-item active ">
			<a class="nav-link active bm " href="# ">Bechir Mihoub<span class="sr-only ">(current)</span></a>
		  </li>
		  <li class="nav-item active ">
			<a class="nav-link active " href="#p2 ">About</a>
		  </li>
		  <li class="nav-item active ">
			<a class="nav-link " href="#p3 ">Portfolio</a>
		  </li>
      <li class="nav-item active ">
			<a class="nav-link " href="#p4 ">Contact</a>
		  </li>
		</ul>
	</div>
</nav>
2

What does it do? And what did you change that you thought would make it gold? You’d need to post your CSS as well for us to see why it isn’t working.

3

It gives it the default colour, I tried bg and style commands in the nav tag but it is still the same colour.

.navbar {
  font-family: sans-serif, arial;
  font-size: 20px;
  text-align: right;
}
4

Bootstrap gives instructions but it just does not seem to work for me.

5

Remove the .bg-light class on your navbar. That class will override all your css with that light gray color. Once you remove that class, you can do

.navbar {
  background: gold;
}
1 Like
6

Let me give you some help instead of just showing the problem and answer.

Most of the time when you want help on our forum, you should provide a link to a running example of your code. I created your code in a codepen here:

When you run into issues like this, it is a good idea to open up the developer tools and inspect the element you are trying to edit (click image to zoom in):

image
image1920×1080 346 KB

If you look at the classes modifying the element on the right, you will see that you also have .bg-warning on there which is adding a goldish color. This is how you can easily tell which classes to modify/remove. If I remove the bg-warning class, I then have the gold color I wanted.