Changing navbar colour on mobile

Good morning.
I hope you can help me. I am new to Enfold and pretty new to changing CSS, I have been trying to change the navigation menu colour which I have succeeded in doing following reading the forum using the following code, however on mobile it looks wrong as the menu turns to a block of colour, is there a way to make the mobile menu the default colour?
The search bar is also now not visible in the menu as its blended with the colour.

#top #header .av-main-nav > li > a {
background-color: #076872 !important;
}
#top #header_main_alternate {
background-color: #076872 !important;
}
#top #header .av-main-nav > li > a .avia-menu-text, #top #header .av-main-nav > li > a .avia-menu-subtext {
color: #ffff!important;
}
#top #header #avia-menu > li:hover > a {
background: #dcdcdd !important;
border: 0 !important;
}

#top #header #avia-menu > li:hover > a span.avia-menu-text {
color: #076872 !important;
border: 0 !important;
}

Thank you very much.