Geek Answers Handbook

Change the opacity of the Bootstrap navigation bar without affecting the buttons

I want my navigation buttons to be visible, and the actual bar that spans the entire page has full opacity. Whenever I change the opacity of the navigation bar, it affects the classes inside it, even when I indicate that these classes do not have transparency.

I posted an image of what I'm trying to reproduce. As you can see, the links are displayed in full, but the navigation bar is invisible, which allows you to display the full background image. It may look like a solid red bar, but I assure you that it is an invisible navigator.

enter image description here

Any help would be appreciated super! Thanks.

Here is my HTML for the navigator:

<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 have been trying to edit my CSS as follows:

 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; } }
+4
source share
3 answers

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

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

Fiddle

+15
source

To change the opacity of a parent without affecting the opacity of children, use rgba in the background property, for example:

 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 above example, the opacity is 70%).

See DEMO .

+1
source

I wrote mixin with a stylus:

 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)

Hope this helps someone who wants to get opacity with the support of almost all browsers believes that

0
source

More articles:


All Articles