bootstrap 3 navbar dropdown box color

Question

I am using flat UI theme with bootstrap 3. The flat UI theme navbar is not working correctly and many are having similar issues with it that have posted on github. So I decided to just use the default BS3 navbar and write my own code (with the help of another stackoverflow thread) to style the menu the way I would like. I am doing this in LESS as an override css.

The problem is I can't figure out how to change the following.

• drop down box color
• the drop down box link color
• drop down box link hover color

Here is the css I am using:

/* navbar */
.navbar-default {
   font-size: floor(@component-font-size-base * 1.067); // ~16px
   border-radius: @border-radius-large;
   border: none;
   background-color: @brand-primary !important;
}
/* title */
.navbar-default .navbar-brand {
    color: #5E5E5E;
}
/* link */
.navbar-default .navbar-nav > li > a {
    color: @clouds;
}
.navbar-default .navbar-nav > li > a:hover {
    color: @clouds;
}
.navbar-default .navbar-nav > .active > a, 
.navbar-default .navbar-nav > .active > a:hover, 
.navbar-default .navbar-nav > .active > a:focus {
    color: @clouds;
    background-color: @brand-secondary;  // Changes color of main button that is currently active.
}
.navbar-default .navbar-nav > .open > a, 
.navbar-default .navbar-nav > .open > a:hover, 
.navbar-default .navbar-nav > .open > a:focus {
    color: @clouds;
    background-color: @brand-secondary;  //  Changes color of main menu button once clicked.
}
/* caret */
.navbar-default .navbar-nav > li > a .caret {
    border-top-color: @clouds;
    border-bottom-color: @clouds;
    color: @clouds;
}
.navbar-default .navbar-nav > li > a:hover .caret {
    border-top-color: #333;
    border-bottom-color: #333;
}
.navbar-default .navbar-nav > .open > a .caret, 
.navbar-default .navbar-nav > .open > a:hover .caret, 
.navbar-default .navbar-nav > .open > a:focus .caret {
    border-top-color: #555;
    border-bottom-color: #555;
}

This produces the correct color bar, bar link, carets, and bar hover effects. But when I click a button with a sub menu, the sub menu still appears in the default BS gray. What classes am I missing to change the drop down sub menu background color, link color, etc?

Thanks

Basketball

Answer 1

This is the CSS to change the dropdown menu style/color..

  .navbar-default .navbar-nav .open .dropdown-menu>li>a, .navbar-default .navbar-nav .open .dropdown-menu {
    background-color: #3344ff;
    color:#ffffff;
  }

Demo: http://bootply.com/93475

Vaunt

Answer 2

I would also add this:

.navbar-default .dropdown-menu {
     background-color: #3344ff;
     color:#ffffff;
}

In addition to what Skelly said in his response:

.navbar-default .navbar-nav .open .dropdown-menu>li>a, .navbar-default .navbar-nav .open .dropdown-menu {
    background-color: #3344ff;
    color:#ffffff;
}

This is because the latter only changes the background-color when the dropdown is open, but once reverted back, the background-color changes back to the default. You can't witness this by just toggling the dropdown, but if you were to delay the transition of the dropdown, for example by using jQuery below to hover, you can see what I mean.

$(document).ready(function () {
    $('.navbar-default .navbar-nav > li.dropdown').hover(function () {
        $('ul.dropdown-menu', this).stop(true, true).slideDown('fast');
        $(this).addClass('open');
    }, function () {
        $('ul.dropdown-menu', this).stop(true, true).slideUp('fast');
        $(this).removeClass('open');
    });
});

jsFiddle with the above CSS You can compare the toggle dropdown with the hover one. They both work.

jsFiddle without the above CSS. The toggle dropdown seems to work, but once you hover and move your mouse away, it'll revert back.

Hemitrope

Answer 3

If you're using FireFox or Chrome, can you use their developer tools to check what CSS is being applied to the dropdown box?

For example, what I would do in Chrome is to right-click on the dropdown box background and select "Inspect element". Then check you have the right element selected. Then you should be able to check which CSS styles are applied to that element in the panel to the right side (it has tabs for Styles, Computed, Event Listeners, DOM Breakpoints and Properties in my version of Chrome 30.0.1599.101 m)

Sylvester

I did use chrome dev tools but still couldn't figure out where the sub-menu hover color was coming from. – Basketball

Answer 4

I used a BS3 menu generator to create the css code I needed. Was much easier than trying to hunt down the tags I needed to change.

Basketball