5

I only want my navbar buttons to be visible, while the actual bar that spans across the entire page has full opacity. Whenever I change the opacity of the navbar it affects the classes inside of it, even when I specify those classes to have no opacity.

I've posted an image of what I'm trying to replicate. As you can see, the links appear in full, but the navbar is invisible, allowing the complete background image to show. It might look like a solid red bar, but I assure you it's an invisible navbar.

enter image description here

Any help would be super appreciated! Thanks.

Here's my navbar HTML code:

<div class="custom_nav">
    <div class="navbar navbar-fixed-top">
        <div class="navbar-inner">
            <div class="container">
                <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                </a>
                <a class="brand" href="index.html">Homegrown</a>
            <div class="nav-collapse">
                <ul class="nav nav-pills">
                    <li class="active"><a href="index.html">Home</a></li>
                    <li><a href="index.html">About</a></li>
                    <li><a href="index.html">Contact</a></li>
                </ul><!-- /.nav -->
            </div><!--/.nav-collapse -->
            </div><!-- /.container -->
        </div><!-- /.navbar-inner -->
    </div><!-- /.navbar -->
</div><!--/.custom_nav-->

So far I've tried editing my CSS with the following:

ul .nav .nav-pills {background:rgba(255,255,255,0.5)}

.custom_nav {
    .navbar.navbar-fixed-top {
        background:rgba(255,255,255,.5);
    }
    .navbar .nav > .active a, .navbar .nav > .active a:hover, .navbar .nav > li a:hover {
        background:rgba(210,105,30, 0); text-shadow:none;
    }   
}
Brian
  • 2,687
  • 9
  • 37
  • 39
  • 1
    Your question isn't very clear. Are you asking how to change the opacity of the parent without affecting the opacity of the children? You can use rgba for the background color (instead of opacity) if that's what you're going for. I would suggest posting a fiddle that demonstrates your problem. – zxqx Jan 24 '13 at 03:40
  • The opacity property is propagated to its children. One way to solve this is to use the mechanism explained at http://www.impressivewebs.com/demo-files/css-opacity/ – Arun P Johny Jan 24 '13 at 03:42
  • @ZakAngelle I'm attempting to do what the link in the comment below yours describes, but with the navbar being the parent and the buttons being the children class. – Brian Jan 24 '13 at 03:48

3 Answers3

18

One solution is to use rbga as given here. It does not work in ie < 9, 

.custom_nav .navbar.navbar-fixed-top .navbar-inner{
    background: rgba(255, 255, 255, 0.3);
}

Fiddle

Community
  • 1
  • 1
Arun P Johny
  • 384,651
  • 66
  • 527
  • 531
2

To change the opacity of the parent without affecting the opacity of the children, use rgba on the background property, like this:

ul {
  background: rgba(255, 255, 255, 0.7);
}

The first 3 values are the RGB values that make up the color, and the last value is the opacity of the color (in the example above, the opacity is 70%).

See DEMO.

zxqx
  • 5,115
  • 2
  • 20
  • 28
0

I had write a mixin with stylu: 

support-for-ie ?= true

opacity(n)
  opacity n
  -moz-opacity n
  filter unquote('alpha(opacity=' + round(n * 100) + ')')
  if support-for-ie
    filter unquote('progid:DXImageTransform.Microsoft.Alpha(Opacity=' + round(n * 100) + ')')

.opacity-70
  opacity(0.7)

I hope it can help someone who want some opacity with support almost all browser thinks

jiahut
  • 1,451
  • 15
  • 14