Customize Bootstrap 3 Nav Bar With Minimal CSS Code

If you ever wanted to create a custom nav bar using Bootstrap 3.0, you would need to find out the exact css classes in order to customize per your need. Here is the minimal css snippet that I have used in one of my project to customize Bootstrap 3.0 menu. Add “navbar-custom” class to “nav” so that the final code looks like “<nav class=’navbar navbar-default navbar-custom’>”. My customization is minimal and I could have further shrinked the code but I wanted to keep the individual section so that further change can be quick.

/* navbar */
.navbar-custom {
    background-color: #af4600;
    border-color: #af4600;
}
    /* navbar top level text and links */
.navbar-custom .navbar-nav > li, .navbar-custom .navbar-nav > li > a {
    color: #ffffff;
}
/* top level link when mouse is hovering */
.navbar-custom .navbar-nav > li > a:hover, .navbar-custom .navbar-nav > li > a:focus {
    color: #ffffff;
    background-color: #af4600;
}
 
/* top level parent link when the drop down is open */
.navbar-custom .navbar-nav > .open > a, .navbar-custom .navbar-nav > .open > a:hover, .navbar-custom .navbar-nav > .open > a:focus {
    background-color: #FF6600;
    color: #ffffff;
}
 
/* level 1 menu bar */
.navbar-custom .dropdown-menu {
    background-color: #FF6600;
    border-color: #af4600;
    color: #ffffff;
}
/* level 1 menu bar text and links*/
.navbar-custom .dropdown-menu > li, .navbar-custom .dropdown-menu > li > a {
    color: #ffffff;
}
/* level 1 menu bar hovering */
.navbar-custom .dropdown-menu > li > a:hover, .navbar-custom .dropdown-menu > li > a:focus {
    color: #ffffff;
    background-color: #af4600;
}
/* mobile toggle button formatting */
.navbar-custom .navbar-toggle {
    border-color: #FF6600;
}
 
/* mobile toggle button mouse hover */
.navbar-custom .navbar-toggle:focus, .navbar-custom .navbar-toggle:hover {
    background-color: #FF6600;
}
 
/* mobile toggle button icon bar tower */
.navbar-custom .navbar-toggle .icon-bar {
    background-color: #ffffff;
}
 
/* mobile 2nd level menu hover */
.navbar-custom .navbar-nav .open .dropdown-menu > li > a:focus, .navbar-custom .navbar-nav .open .dropdown-menu > li > a:hover {
    background-color: #FF6600;
    color: #ffffff;
}
/* mobile 2nd level link */
.navbar-custom .navbar-nav .open .dropdown-menu > li > a {
    color: #ffffff;
}