Solo quiero que los botones de mi barra de navegación estén visibles, mientras que la barra real que se extiende a lo largo de toda la página tiene una opacidad total. Cada vez que cambio la opacidad de la barra de navegación afecta a las clases dentro de ella, incluso cuando especifico que esas clases no tienen opacidad.

He publicado una imagen de lo que estoy tratando de replicar. Como puede ver, los enlaces aparecen completos, pero la barra de navegación es invisible, lo que permite mostrar la imagen de fondo completa. Puede parecer una barra roja sólida, pero te aseguro que es una barra de navegación invisible.

Cualquier ayuda sería muy apreciada! Gracias.

Aquí está mi código HTML de la barra de navegación:

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

Hasta ahora he intentado editar mi CSS con lo siguiente:

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