remove black backgroung from the navigation bar

Question

How to remove the black background color from the navigation bar.... i commented using firebug but i am not able to achieve it.... providing my code below....

http://jsfiddle.net/qvEnQ/1/embedded/result/

<div class="navbar navbar-inverse navbar-fixed-top" style="margin-top: 15px;">
        <div class="navbar-inner">
            <div class="container" id="expandingNavbar">
                <a class="btn btn-navbar collapsed" data-toggle="collapse" data-target=".nav-collapse" target="_self">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                </a>
                <a class="brand" href="/" style="padding-top: 0px; margin-left: 0px;" target="_self">
                    <img alt="change" class="defieLogo" src="/images/defie_logo_only.png">
                </a>

                <div id="welcomeName">Welcome soojin!</div>
                <div id="emailAccount">[email protected]<span style="color: #0074bd; position: relative;left: 67px;bottom: 33px;">[Log out]</span></div>

                <div class="nav-collapse collapse" style="height: 0px;">
                    <ul class="nav">
                        <li style="padding-left: 107px;">
                            <a style="font-weight: bold;" href="/product.html" <?="$strClass_1" ?="" target="_self">&gt;
                            MENU
                            </a>
                        </li>

                        <li>
                            <a style="color: #9b365a;" href="/solution.html" <?="$strClass_2" ?="" target="_self">&gt;
                                <img alt="squareList" style="margin-right: 10px;" src="http://intra.defie.co/images/cube_vendor.png">Vendors</a>
                        </li>
                        <li>
                            <a id="smallLinks" style="font-weight: bold; font-size: 12px; padding-left: 0px; padding-right: 5px;" href="/solution.html" <?="$strClass_2" ?="" target="_self">&gt;Add New Vendor</a>
                        </li>
                        <li>
                            <a id="smallLinks" style="font-weight: bold; font-size: 12px; padding-left: 0px; padding-right: 5px;" href="/solution.html" <?="$strClass_2" ?="" target="_self">&gt;Vendor List </a>
                        </li>
                        <li>
                            <a id="smallLinks" style="font-weight: bold; font-size: 12px; padding-left: 0px; padding-right: 0px;" href="/solution.html" <?="$strClass_2" ?="" target="_self">&gt;Reports</a>
                        </li>

                        <li><a style="color: #9b365a;" href="/service.html" <?="$strClass_3" ?="" target="_self">&gt;
                            <img alt="squareList" style="margin-right: 10px;" src="http://intra.defie.co/images/cube_vendor.png">Purchase Transactions</a></li>
                        <li class="iphonePartnerLink"><a style="color: #9b365a;" href="/partner.html" <?="$strClass_4" ?="" target="_self">&gt;
                            <img alt="squareList" style="margin-right: 10px;" src="http://intra.defie.co/images/cube_vendor.png">Product Life cycle</a></li>
                        <li><a style="color: #9b365a;" href="/contact.html" <?="$strClass_5" ?="" target="_self">&gt;
                            <img alt="squareList" style="margin-right: 10px;" src="http://intra.defie.co/images/cube_vendor.png">RMA Transactions</a></li>  
                    </ul>
                    <a href="#myModal" role="button" data-toggle="modal" target="_self">
                        <span style="color: black; font-weight: bold; font-size: 20px; position: relative; margin-left: 488px; ">Soojin</span> <span style="color: #0074bd;">[Log out]</span>

                    </a>
                </div><!--/.nav-collapse -->
            </div>
        </div>
    </div>

Answer 1

Remove the background by adding "background: transparent;" (or any other colour) to the class .navbar-inner.

Line 7972 of your css in jsfiddle

Like so:

.navbar-inverse .navbar-inner {
    background: transparent;
}

(Get rid of background-image, background-repeat and the filter)

Hope this helps!