1
<!-- Navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li><a href="#">GemCode [img] </a>
                </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li>
                    <form class="navbar-form navbar-left" role="search">
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="Search">
                        </div>
                        <button type="submit" class="btn btn-default">Submit</button>
                    </form>
                </li>
            </ul>
        </div>
    </div>
</nav>

This is my HTML for a fixed navigation bar.

.navbar-fixed-top {
    background-color: #ecf0f1;
    border-radius: 10px;
    font-family: Arial;
    opacity: 0.6;
    height: 10%;
    margin-top: 10px;
    margin-bottom: 10px;
    width: 70%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
}

This is the CSS for the HTML above.

What I am trying to achieve is a transparent background with text that is completely opaque. I tried adding:

a. { 
    opacity: 1.0;
}

this did not work. I am using Bootstrap and I am unsure as to how to make the text opaque.

Magicprog.fr
  • 4,072
  • 4
  • 26
  • 35
Muhammad Ali
  • 119
  • 3
  • 13
  • You could use just a transparent background like `background-color:rgba(236, 240, 241, 0.6);` **Edit**: If using a preprocessor like SASS you can do `background-color:rgba(#ecf0f1, 0.6);` just as well. – Ben Kauer Nov 20 '15 at 11:41
  • is the `.` in `a.` an error in your post ? – Magicprog.fr Nov 20 '15 at 11:42
  • Thanks for this Maigcprog.fr it worked very well. and yes it was an error in the post it is suppose to be of course .a :) – Muhammad Ali Nov 20 '15 at 11:49

1 Answers1

1

The issue with your approach is that you're changing the opacity for the entire containing element—including its children.

Instead of changing the opacity of the containing element to affect its background opacity, try changing the alpha of its background color. This requires you to convert your color from hex to rgba format (tools are available online for doing so). Here is an example with a black background with an opacity of 50%:

.navbar-fixed-top {
    background-color: rgba(0,0,0,.5);
    ...
}

At this point, your immediate problem would be solved, but you could also change the opacity or alpha of the elements inside of your container and see the effects if you wanted:

.navbar-fixed-top a {
    color: rgba(0,0,0, .8);
}
pygeek
  • 7,356
  • 1
  • 20
  • 41