Change navbar background color

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;
}
Was this page helpful?