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; }
That’s great, it helped me a lot, thank you very much.