Change Menu Background Colour

Hi, how do I change the menu colour on Responsive state? And also is it possible to change the width of the menu to 100% on mobile view?

Thank you.

 

Hello,

To change the color of menu in mobile devices,
Paste the code given below in Custom CSS section
(Appearance -> Theme Options -> Styling Options -> Custom CSS) of your dashboard.

Code:

.mobile_nav.opened {
background: orange;
}
.it_mobile_menu li {
background: orange;
}
.it_mobile_menu li:hover {
background: white;
}
.it_mobile_menu a {
color:white;
}
.it_mobile_menu > li.current_page_item > a {
color: red;
}
.it_mobile_menu li a:hover{
color:red;
} 

In place of "orange", "white" and "red" you can put your color or color code.

To change the width of menu in mobile devices,
Paste the code given below in Custom CSS section
(Appearance -> Theme Options -> Styling Options -> Custom CSS) of your dashboard.

Code:

@media only screen and (max-width: 480px){
.menu_wrapper {
margin-left: -15px;
width: 320px;
}
.mobile_nav {
width: 235px;
margin-bottom: 0;
margin-top: 4px;
margin-left: 8px;
}
#mobile_menu {
width: 303px;
}
} 

This will solve your issue.