CODEWITHSUNDEEP
htmlcsstwitter-bootstrapopacitynavbar
Brian
Brian

Reputation: 2727

Changing Bootstrap's navbar opacity without affecting the buttons

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;
    }   
}

Upvotes: 5

Views: 50293

Answers (3)

jiahut
jiahut

Reputation: 1531

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

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388326

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

Upvotes: 18

zxqx
zxqx

Reputation: 5205

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.

Upvotes: 2

Related Questions