Can't remove black bar from bootstrap menu to show my menu changes

Question

I can't figure out for the life of me why the embedded css that I have is not overriding the menu options set by default to twitter bootstrap. Below is the menu that I want to have:

Below this is what I have as an image now. As you can see, there is some blue toward the bottom of the menu. I tried a whole bunch of css and the only thing that slightly worked was inline style but that only did some of the menu.

This is my internal style sheet

.navbar-default {
    background-color: #0080c0;
    border-color: #80ffff;
}
.navbar-default .navbar-brand {
    color: #ecf0f1;
}
.navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus {
    color: #000000;
}
.navbar-default .navbar-text {
    color: #ecf0f1;
}
.navbar-default .navbar-nav > li > a {
    color: #ecf0f1;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
    color: #000000;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
    color: #000000;
    background-color: #80ffff;
}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
    color: #000000;
    background-color: #80ffff;
}
.navbar-default .navbar-toggle {
    border-color: #80ffff;
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
    background-color: #80ffff;
}
.navbar-default .navbar-toggle .icon-bar {
    background-color: #ecf0f1;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
    border-color: #ecf0f1;
}
.navbar-default .navbar-link {
    color: #ecf0f1;
}
.navbar-default .navbar-link:hover {
    color: #000000;
}

@media (max-width: 767px) {
    .navbar-default .navbar-nav .open .dropdown-menu > li > a {
        color: #ecf0f1;
    }
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
        color: #000000;
    }
    .navbar-default .navbar-nav .open .dropdown-menu > .active > a, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
        color: #000000;
        background-color: #80ffff;
    }
}

This is my menu code

<div class="navbar navbar-default navbar-inverse navbar-fixed-top navbar-custom" >
         <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <div  class="collapse navbar-collapse navbar-ex1-collapse">
                <ul class="nav navbar-nav">
                    <li {{ (Request::is('/') ? ' class="active"' : '') }}><a href="{{{ URL::to('') }}}">Home</a></li>
                </ul>

                <ul class="nav navbar-nav pull-right">
                    @if (Auth::check())
                    @if (Auth::user()->hasRole('admin'))
                    <li><a href="{{{ URL::to('admin') }}}">Admin Panel</a></li>
                    @endif
                    @if(Auth::user()->isRegistered())
                    <li><a href="{{{ URL::to('registered') }}}">Registered</a></li>
                    @endif
                    <li><a href="{{{ URL::to('user') }}}">Logged in as {{{ Auth::user()->username }}}</a></li>
                    <li><a href="{{{ URL::to('user/logout') }}}">Logout</a></li>
                    @else
                    <li {{ (Request::is('user/login') ? ' class="active"' : '') }}><a href="{{{ URL::to('user/login') }}}">Login</a></li>
                    <li {{ (Request::is('user/create') ? ' class="active"' : '') }}><a href="{{{ URL::to('user/create') }}}">{{{ Lang::get('site.sign_up') }}}</a></li>
                    @endif
                </ul>
                <!-- ./ nav-collapse -->
            </div>
        </div>
    </div>

If you read toward the bottom thank you for your help. I appreciate it!

Answer 1

You have to use !important in order to overwrite the css

for example

.navbar-default {
    background-color: #0080c0 !important;
    border-color: #80ffff !important;
}

But you have to be careful in modifying the base (bootstrap) css, as this will get reflected in all the places that you have used that class

Instead you can create a custom class and add it to your html

.navBarBG{
 background-color: #0080c0 !important;
        border-color: #80ffff !important;
}

Using this method you can overwrite your base css without modifying it.