Customize Bootstrap 3 nav bar with minimal css code

By | March 26, 2018

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;
}
Vishal Monpara is a full stack Solution Developer/Architect with 12 years of experience primarily using Microsoft stack. He is currently working in Retail industry and moving 1’s and 0’s from geographically dispersed hard disks to geographically dispersed user leveraging geographically dispersed team members.

Leave a Reply

Your email address will not be published. Required fields are marked *