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.

You can search the user’s forum or ask the user community by opening a new thread in the Customizr theme forum. Before opening a new topic, you might want to follow the troubleshooting steps..

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.