How to remove opacity (transparency) from the navbar-collapse in Bootstrap 3? - css

Question

I am using bootstrap 3. I have a transparent navigation bar and a background image. When my resolution is smartphone or tablet view my meny bar collapses into a button. When I click the button my menues pop up. However, because my parent elements is transparent my navbar-collapse is transparent too and the menu links are not well seen against the background image. which property do I need to use to make my collapsed menu a solid white color?
<header class="container">
<div class="bg"> <!--Background Image-->
<div class= "number">
<div class="number-wrapper">
<span id="tel">[phone] </span>
</div>
</div>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img src="images/logo2.png" class="img-responsive" alt="Sample Image"/>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Contact Us</li>
<li class="dropdown">
<span style="color: #27A9E1">Menu 4 </span><span class="caret" style="color: #27A9E1"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav><!--The end of the menu bar-->
</div>
</header>
CSS:
nav.navbar.navbar-default {
border-top: none;
background-color: #FFFFFF;
opacity: 0.7;
}

Answer 1

Opacity on the enclosing elements is not the way to go, because once you declare opacity, all enclosed elements will inherit the same opacity, which can't be reversed. Solution? Use the alpha channel on the background-color, like so
background-color: rgba (256,256,256, 0.7)
Example: http://www.bootply.com/s92TKwxRMg
You'll see I also declared it on the dropdown, assuming that's what you're after.

Answer 2

You can try like this
#media (max-width:480px) {
body > .navbar-default {
background-color: #2c3e50;
}
}
so this code will add the navbar-default with color when the page was resize until reach 480px. hope this will help.