headerbanner

Bootstrap collapsed submenu has a wrong background

Responsive navbar submenu (multilevel menu) is displayed as a regular dropdown menu in a Bootstrap 2.3.2 framework.

Background of a submenu has a color from @linkColor:

submenu

A collapsed submenu could have any darkgray color. Add a next code after @import "responsive-navbar.less"; into bootstrap-responsive.less and then recompile less:

@media (max-width: @navbarCollapseWidth) {
// Hover/Focus state
// -----------
    .dropdown-menu > li > a:hover,
    .dropdown-menu > li > a:focus,
    .dropdown-submenu:hover > a,
    .dropdown-submenu:focus > a {
      text-decoration: none;
      color: @dropdownLinkColorHover;
      #gradient > .vertical(@grayDark, darken(@grayDark, 5%));
    }
// Active state
// ------------
    .dropdown-menu > .active > a,
    .dropdown-menu > .active > a:hover,
    .dropdown-menu > .active > a:focus {
      color: @dropdownLinkColorActive;
      text-decoration: none;
      outline: 0;
      //#gradient > .vertical(@dropdownLinkBackgroundActive, darken(@dropdownLinkBackgroundActive, 5%));
      #gradient > .vertical(@grayDark, darken(@grayDark, 5%));
    }
}