Change the Navbar Colors/Font/Size

⚠️ Code snippets might not be compatible with the latest version of your theme. Always use a child theme to customize your theme, and test your code on a staging website before migrating to production.

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

 

Leave a Reply to Nicolas Cancel reply

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

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