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>
</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 -->
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);
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;
}
