Css 如何仅更改移动导航菜单背景

我有一个网站在wordpress我想改变它的移动菜单背景。我在css中尝试了很多次，但似乎都不起作用。 每个菜单在主站点和移动视图上都显示得非常好。我希望移动和桌面视图上的菜单具有不同的背景。请在下面找到html代码和css代码

    <!-- Start Header -->
        <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
              <!-- Your Logo -->


                    <a href="http://www.rgfghana.org/">
                <img src="http://www.rgfghana.org/wp-content/themes/idas/image/logo.png" alt="RGF - Remittance Grant Facility" id="logo"/>
            </a>
            </div>
            <div id="navbar" class="navbar-collapse collapse" style="font-size:17px; float:right">
                  <div id="mega-menu-wrap-primary" class="mega-menu-wrap"><div class="mega-menu-toggle" tabindex="0"><div class='mega-toggle-block mega-menu-toggle-block mega-toggle-block-right mega-toggle-block-1' id='mega-toggle-block-1'></div></div><ul id="mega-menu-primary" class="mega-menu mega-menu-horizontal mega-no-js" data-event="hover" data-effect="fade_up" data-effect-speed="200" data-second-click="go" data-document-click="collapse" data-vertical-behaviour="standard" data-breakpoint="600" data-unbind="true"><li class='mega-menu-item mega-menu-item-type-custom mega-menu-item-object-custom mega-menu-item-home mega-align-bottom-left mega-menu-flyout mega-menu-item-13' id='mega-menu-item-13'><a class="mega-menu-link" href="http://www.rgfghana.org/" tabindex="0">Home</a></li><li class='mega-menu-item mega-menu-item-type-custom mega-menu-item-object-custom mega-current-menu-ancestor mega-current-menu-parent mega-menu-item-has-children mega-align-bottom-left mega-menu-flyout mega-menu-item-364' id='mega-menu-item-364'><a class="mega-menu-link" href="#" aria-haspopup="true" tabindex="0">About Us</a>

    </li><li class='mega-menu-item mega-menu-item-type-custom mega-menu-item-object-custom mega-menu-item-has-children mega-align-bottom-left mega-menu-flyout mega-menu-item-369' id='mega-menu-item-369'><a class="mega-menu-link" href="#" aria-haspopup="true" tabindex="0">Our Objectives</a>
    <ul class="mega-sub-menu">
    <li class='mega-menu-item mega-menu-item-type-post_type mega-menu-item-object-page mega-menu-item-193' id='mega-menu-item-193'><a class="mega-menu-link" href="http://www.rgfghana.org/our-goals/">Objectives</a></li><li class='mega-menu-item mega-menu-item-type-post_type mega-menu-item-object-page mega-menu-item-396' id='mega-menu-item-396'><a class="mega-menu-link" href="http://www.rgfghana.org/expected-impact/">Expected Impact</a></li></ul>
    </div>        
            </div>
             </div>
            </nav>

        <!-- End Header -->

---

这需要通过DOM检查器进行一点调试。请确保样式至少出现在检查器中，即使没有生效。（请参阅：）

接下来尝试使用

强制使用背景色！重要

声明。请参阅：

    .header {
        box-shadow: 0 0 7px rgba(0, 255, 0, 0.3);
        -webkit-box-shadow: 0 0 7px rgba(0,0,0,.05);
        -moz-box-shadow: 0 0 7px rgba(0,0,0,.05);
            -ms-box-shadow: 0 0 7px rgba(0,0,0,.05);
            -o-box-shadow: 0 0 7px rgba(0,0,0,.05);
            background:#fff;
            position:fixed;
            top:0px;
            left:0px;
            width:100%;
            z-index:9999;

    }

      position: absolute;
      background:#605f5e;
      background: url('image/image-back.jpg') ; 
      background-size: 100% 100%;
      z-index: -107;
    }
    @media only screen and (min-width: 600px) {
        .col-s-1 {width: 8.33%;}
        .col-s-2 {width: 16.66%;}
        .col-s-3 {width: 25%;}
        .col-s-4 {width: 33.33%;}
        .col-s-5 {width: 41.66%;}
        .col-s-6 {width: 50%;}
        .col-s-7 {width: 58.33%;}
        .col-s-8 {width: 66.66%;}
        .col-s-9 {width: 75%;}
        .col-s-10 {width: 83.33%;}
        .col-s-11 {width: 91.66%;}
        .col-s-12 {width: 100%;}
    background: #428bca;
    }
    @media only screen and (min-width: 768px) {
        .col-1 {width: 8.33%;}
        .col-2 {width: 16.66%;}
        .col-3 {width: 25%;}
        .col-4 {width: 33.33%;}
        .col-5 {width: 41.66%;}
        .col-6 {width: 50%;}
        .col-7 {width: 58.33%;}
        .col-8 {width: 66.66%;}
        .col-9 {width: 75%;}
        .col-10 {width: 83.33%;}
        .col-11 {width: 91.66%;}
        .col-12 {width: 100%;}
       background: #428bca;
    }
    @media (max-width: 640px) {
        .mobile-nav .show-nav {
            display: block;
            padding: 1em 40px;
            color: #fff;
            background: #000; 
            cursor: pointer;
            border-bottom: 1px solid #000;
        }
    }


    /*-------------------------------------------------Navbar------------------------------------------------------------------------------------------------------------------------*/
    .navbar-inverse .navbar-brand {
        padding: 30px 15px;
        margin-right: 30px;
        color: inherit;
    }
    .navbar-inverse .navbar-brand:hover, .navbar-inverse .navbar-brand:focus {
        color: #000;
    }
    .navbar-inverse {
                background-color: rgba(255, 255, 255, .9);


        border: none;
    }
    .navbar-right button {
        margin: 23px 0;
    }
    .navbar-nav>li>a {
        padding: 30px 0;
        margin: 0 15px;
    }
    .navbar-inverse .navbar-nav>li>a {
        color: inherit;
        text-transform: uppercase;
        font-size: 12px;
    }
    .navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:focus,
    .navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:hover, .navbar-inverse .navbar-nav>.active>a:focus {
        background-color: transparent;
        background-color: rgba(255, 255, 255, 0);
        color: #3498db;
    }
    .header-button {
        margin-left: 15px;
    }
    .navbar-brand
    {
        color:#fff;
        padding-top:10px;
        font-size:1.5em;
    }
    .navbar-nav .active .dropdown-menu{
      background : white;
    }