To change the navbar background color or text color you should add custom styles.
Note: The best way to add custom styles – is in child theme style.css. Also, you can add it in options Youplay Options > General > Custom CSS, but in this way, you should add for each value important tag (Example: opacity: 1 !important;).
This is default styles for navbar, customize it as you want:
/* BG color */
.navbar-youplay {
background: rgba(8, 3, 37, 0.4);
}
/* BG color after scroll */
.navbar-youplay.navbar-small {
background: rgba(8, 3, 37, 0.94);
}
/* BG color for dropdown */
.navbar-youplay .dropdown-menu,
.navbar-youplay .navbar-nav > li > .dropdown-menu {
background: rgba(8, 3, 37, 0.8);
}
.navbar-youplay .nav > .dropdown > .dropdown-menu:after {
border-bottom-color: rgba(8, 3, 37, 0.8);
}
/* BG color on mobile devices */
@media (max-width: 767px) {
.navbar-youplay .navbar-collapse {
background: rgb(8, 3, 37);
}
.navbar-youplay.navbar-small .navbar-header {
background: rgba(8, 3, 37, 0.94);
}
}
/* Text color */
.navbar-youplay .navbar-nav > li.open > a,
.navbar-youplay .navbar-nav > li > a,
.navbar-youplay .navbar-nav > li > a:focus,
.navbar-youplay .navbar-nav > li > a:hover {
color: #fff;
}
/* Text label color */
.navbar-youplay .navbar-nav > li > a > .label {
color: rgba(255,255,255,.5);
}
/* Text color for dropdown */
.navbar-youplay .dropdown-menu > ul > li > a,
.navbar-youplay .navbar-nav > li > .dropdown-menu > ul > li > a {
color: #fff;
}
/* Item hover bottom line color for dropdown */
.navbar-youplay .dropdown-menu > ul > li > a:after,
.navbar-youplay .navbar-nav > li > .dropdown-menu > ul > li > a:after {
background: #fff;
}