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.
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
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