0

I have a navbar for a tribute page I'm coding for freecodecamp, and I just want the background of the navbar to be transparent black, and the text to be solid black, but it seems this is difficult to do.

here is the codepen: https://codepen.io/bkhible/pen/Bzpyyb

.navbar {
  background-color: rgba(0,0,0,0.3);
  border: none;
  color: #000;
}

h3 {
  color: #000;
}

.navbar-text {
  font-family: 'Signika', sans-serif;
  font-size: 68px;
  letter-spacing: 10px;
  color: #000;
}

and

<nav class="navbar navbar-inverse navbar-fixed-bottom">
  <div class="container-fluid">
    <h3 class="navbar-text">RADIOHEAD</h3>
  </div>
</nav>

I found this q&a: Opacity bleeding into child divs ... but that solution seems to not be working unless I am just completely missing something? I'm assuming the fix is really, really simple.

Community
  • 1
  • 1
Bethany Hible
  • 35
  • 1
  • 3
  • 6
  • 3
    There is something else changing the color of your text : `.navbar-inverse .navbar-text { color: #9d9d9d; }` in navbar.less. It does not come from the background color of your `.navbar` – dievardump Jun 23 '16 at 21:30
  • wow, it was simple. thank you so much! – Bethany Hible Jun 23 '16 at 21:33
  • To add to what @dievardump said, if you ever suspect that something you just added in your CSS file is getting overwritten, try adding the !important property to it. If it is getting overriden by another class, this will most likely let you know (if it now works, its overridden, if not, something else is wrong) - Example: color: black !important; – Xariez Jun 23 '16 at 21:43
  • @Xariez got it. thanks a bunch for the tip! – Bethany Hible Jun 23 '16 at 21:50
  • Also think of using the Developer tool of your browser(f12) to select your element and see the css rules that are applied to it. You'll quickly find what is messing with your CSS) – dievardump Jun 23 '16 at 23:23
  • That is, indeed, a very good hint @dievardump . Use if often myself :P – Xariez Jun 25 '16 at 09:55
  • @dievardump had no clue i could do that, thanks! – Bethany Hible Jun 26 '16 at 16:38

1 Answers1

0

It is not opacity. It is color in your less:

// navbar.less:548
.navbar-inverse .navbar-text {
  color: #9d9d9d;
}
Mr. Hedgehog
  • 2,644
  • 1
  • 14
  • 18