Mobile menu background colour

[evieb]

Hi there

I'm having a frustrating problem with something that should normally be a simple css fix. The mobile menu on this website (www.floatingaway.com.au) is hard to read and I'm wanting to make the background white. Below is the custom css I have applied that doesn't seem to change the menu at all... Any help would be appreciated, thanks.

 @media only screen and (max-width: 992px)
#mainmenu li {
  background-color: #FFFFFF!important;
}               
@media only screen and (max-width: 992px)
a:hover, a:active, a:focus {
    background-color: #FFFFFF!important;
}
  @media only screen and (max-width: 992px)
#mainmenu a, a:hover {
    background: #FFFFFF!important;
}

 

[Johna]

You need the curly brackets ({}) around everything in each media query:

@media only screen and (max-width: 992px) {  /*add the curly brackets here*/
  #mainmenu li {
    background-color: #FFFFFF !important;
  }
}  /*add the curly brackets here*/

@media only screen and (max-width: 992px) {  /*add the curly brackets here*/
  a:hover, a:active, a:focus {
    background-color: #FFFFFF !important;
  }
}  /*add the curly brackets here*/

@media only screen and (max-width: 992px) {  /*add the curly brackets here*/
  #mainmenu a, a:hover {
    background: #FFFFFF !important;
  }
}  /*add the curly brackets here*/