Change the Navbar Colors/Font/Size

Last Reviewed: 29-Apr-15 (3.3.20) 3.1.* 3.2.* 3.3.*

Where to copy/paste this code?
The simplest way is to use the Custom CSS section of the customizer option screen. If you have many customizations to make in CSS and PHP, then we strongly recommend you create a child theme. Everything you need to know about creating a child theme with Customizr here.

/* START OF Change the Navbar Colors/Font/Size */
/* Adjust Menu (red) text color, (Garamond) font-family, (1.5em) font-size  */
.navbar .nav > li > a, .navbar .nav > li > a:first-letter,
.navbar .nav > li.current-menu-item > a, 
.navbar .nav > li.current-menu-ancestor > a {
display:        inline;
color:          red;                        
font-family:    Garamond;
font-size:      1.5em;
padding:        5px 20px;
}

/* Adjust Menu colors - Normal */
.navbar .nav > li > a, .navbar .nav > li > a:first-letter {
color:          lightgray;
text-shadow:    none;
}
/* Adjust Menu colors - Hover */
.navbar .nav > li > a:hover, .navbar .nav > li > a:hover:first-letter { 
color:          white;                      
text-shadow:    none;
}
/* Adjust Menu colors - Active */
.navbar .nav > li > a:active, .navbar .nav > li > a:active:first-letter,
.navbar .nav > li.current-menu-item > a, 
.navbar .nav > li.current-menu-ancestor > a,
.navbar .nav > li.current-menu-item > a:first-letter, 
.navbar .nav > li.current-menu-ancestor > a:first-letter {
color:          blue;
text-shadow:    none;
}

/* Adjust dropdown Menu items (blue) text color, (yellow) shading and (green) border */
.dropdown-menu > li > a {
color:          blue;
background:     yellow;
border-bottom:  2px solid green;
}

/* Remove the Hover/Focus Colors  */
.navbar .nav > li.current-menu-item > a, .navbar .nav > li.current-menu-ancestor > a, 
.navbar .nav > li > a:hover, .navbar .nav > li > a:focus {
color:          #5A5A5A;
}
/* END OF Change the Navbar Colors/Font/Size */

 

Only want to change the responsive, collapsed menu?
Use the code above, but change .navbar .nav to .navbar .nav-collapse .nav

 

33 thoughts on “Change the Navbar Colors/Font/Size”

Comments are closed.