I have a site in wordpress i would like to change its mobile menu background. I have tried so many times in the css but seem not work.
Each menu appears very fine on the main site and the mobile view too. I want to have different background for the menu on both the mobile and desktop view. PLease find below the html code and the css code.

    <!-- 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>
              <!-- 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"/>
            <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>

        <!-- End Header -->

the css code looks like this;

    .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);


      position: absolute;
      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-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-nav .active .dropdown-menu{
      background : white;

Read more here: How do you Change the mobile nav menu background only


If you know the solution of this issue, please leave us a reply in Comment section, to update the question.

Wordpress related questions and answers: