How to put a background to the drop down hamburger menu

I have a horizontal navigation bar. However, when the screen gets to small, it closes up to one of the hamburger icons that can be clicked, and then it opens up vertically. The problem I am having is that it’s just the words. No solid background or anything with it. And it is also behind some of the elements that it should be covering up. I can’t seem to figure out where in my code I need to adjust the css to manage this. Here is my html for my nav bar:

<nav class="navbar navbar-inverse navsize">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" ><img id="logo" src="/Images/SC2_MyLink_Logo.png" alt="SC2 Logo"/></a>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul id="navposition" class="nav navbar-nav">
                <li class="individualbtnposition col-lg-2"><a href="/">Home</a></li>
                <li class="dropdown individualbtnposition">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Our Company<span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="/OurCompany">Our History</a></li>
                        <li><a href="/OurCompany/Facilities">Facilities</a></li>
                    </ul>
                </li>
                <li class="dropdown individualbtnposition">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Employee Services<span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li class="dropdown dropdown-submenu">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Forms</a>
                            <ul class="dropdown-menu">
                                <li><a href="/FormsHandlers/HRForms">HR Forms</a></li>
                                <li><a href="/FormsHandlers/CorporateForms">Corporate Forms</a></li>
                                <li><a href="/FormsHandlers/EmployeeBenefitsForms">Employee Benefits</a></li>
                                <li><a href="/FormsHandlers/AccidentForms">Accident Forms</a></li>
                                <li><a href="/FormsHandlers/PayrollForms">Payroll Forms</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Pay Stubs</a></li>
                        <li><a href="http://teams.sc2services.com">SC2 Teams</a></li>
                        <li><a href="/FormsHandlers/FAQ">FAQ</a></li>
                    </ul>
                </li>
                <li class="dropdown individualbtnposition">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Support Services<span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">IT Support</a></li>
                        <li><a href="#">Purchasing Ticket</a></li>
                        <li><a href="http://testmaintenance.sc2services.com/">Maint. Support</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
    <div class="logout col-lg-1">
        <a href="/Home/Logout">Sign Out</a>
    </div>
</nav>

And here is the current css:

.layoutBody {
    background: white;
    color: #002d62;
    font-family: 'Oswald', sans-serif;
}
.navsize{
    height: 135px;
    margin-bottom: 0;
}
.navbar-inverse {
    background: linear-gradient(#8c8c8c, #c4c4c4);
}
nav a {
    color: #002d62 !important;
    font-size: 17px;
}

nav a:hover {
    color: #efcd21 !important;
}
.navbar-header a {
    height: 120px;
    width: auto;
    padding-top: 3px;
}

#logo {
    height: 120px;
    width: auto;
}

#navposition {
    width: 50%;
    margin-top: 5.5%;
}
.individualbtnposition {
    font-size: large;
}

.navbar-inverse .navbar-nav > .open > a, .navbar-inverse .navbar-nav > .open > a:hover, .navbar-inverse .navbar-nav > .open > a:focus {
    color: #fff;
    background-color: white;
}
.navbar-nav > li > .dropdown-menu {
    margin-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border: none;
}

.dropdown-submenu {
    position: relative;
}
.dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
    margin-left: -1px;
    -webkit-border-radius: 0 6px 6px 6px;
    -moz-border-radius: 0 6px 6px 6px;
    border-radius: 0 6px 6px 6px;
}

.dropdown-submenu > a:after {
    display: block;
    content: " ";
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-left-color: #cccccc;
    margin-top: 5px;
    margin-right: -10px;
}

.dropdown-submenu:hover > a:after {
    border-left-color: #002d62;
}

.dropdown-submenu.pull-left {
    float: none;
}

.dropdown-submenu.pull-left > .dropdown-menu {
    left: -100%;
    margin-left: 10px;
    -webkit-border-radius: 6px 0 6px 6px;
    -moz-border-radius: 6px 0 6px 6px;
    border-radius: 6px 0 6px 6px;
}

#footer {
    background-color: #002d62;
    padding-top: 8px;
}

#bottombar {
    background-color: #efcd21;
    width: 100%;
    height: 30px;
}

#sc2info {
    color: #002d62;
    margin-left: 15px;
}

.logout {
    position: absolute;
    bottom: 5px;
    right: 20px;
}

    .logout > a {
        font-size: 16px;
        font-weight: bolder;
        color: white;
    }

        .logout > a:hover {
            color: white;
        }



@media screen and (max-width: 480px) {
    #logo
    {
        width: 150px;
        height: auto;
    }

    .navbar{
        height: 67px;
        border-bottom-style: solid;
        border-bottom-width: 5px;
    }

    
}

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.