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”
Hi there, everyone! I need to remove -or make invisible- the horizontal lines between entries in the standard recent posts widget and the vertical line between the widget itself and the rest of the blog (using a left sidebar). I am sure somebody out there can help me. Thanks in advance!
Hi,
The developer team handles support for Customizr at https://wordpress.org/support/theme/customizr and for Customizr-Pro at http://presscustomizr.com/support/. Please post your query there with a link to your site.
Thanks 🙂
because the selectors you’ve used apply to both regular and responsive nav, you have to restrict it to when the responsive nav kicks in, at 979 pixels or lower. Try this:
/* Adjust Menu colors - Normal */ @media screen and (max-width: 979px) { .navbar .nav > li > a, .navbar .nav-collapse .nav > li > a:first-letter { color: black; text-shadow: none; } }Hey there,
is there any method to show the second dropdown menu beside the arrow > of the menu instead centered?
Thanks in advance and best regards,
Markus
Hi Dave,
Thank you for some good advice. The snippet works fine, except that the menu icons that indicate a sub-menu (triangles to the right of the menu text) are not affected by the new colour. As I understand it those icons should come from the icon font included in the theme, probably by using pseudo-element ::after, and thus being editable. Here is my css:
.navbar .nav > li > a, .navbar .nav > li > a::after, .navbar .dropdown-menu > li > a, .navbar .dropdown-menu > li > a::after, .social-block > a { color: rgb(0, 56, 107); }Where am I thinking wrong?
Hi ,
i tried to change the background of the menu following what was said in the discussion but it’s doesn’t work , can someone help me ? also how to align menu text center . Thank you .
Hi Doria,
You might want to search in the forums about this. (it has surely been adressed already) If you don’t find any answer then open topics in the forum about this.
Cheers
Hello. This is my first post and I’m both new to WP and Customizr so I still ignore too much. Please be kind and bear on that. I need to separate the options of a drop-down menu. Searched site but could find nothing on “menu separator”. .
I’ve updated the Snippet. See line #37 for the code to add a separator. Change to whatever color you require.
Good luck!
Hello,
Can someone please tell me how to remove the white space above the logo/navbar area? I have tried whatever I could find on this site and nothing works. The site is: http://bestofindianashville.com/
Thanks so much
Hello, I am trying to change only one page title in the navigation menu…This is a lot more difficult to type what i’m trying to achieve than what is in my head. But I want just the “Order IKEA” menu tab’s text to be Bold…only that one…not the entire menu’s text. I thought I would be able to change some of the title attributes in the menu area and item in wp but I am uncertain of how to accomplish that. Any links to this or straight advice would be much appreciated. Thanks in advance!
http://www.wedeliveromaha.com
How can I vertically center my navbar menu items?
Totally new to Wordpress i was surprised how easy it was to make the first steps in making a website.
Now i created and activated the child theme because i want to change the navbar layout.
I simply copied the first part of your snippet and pasted it into my Style.css
Color of the menu changed to font and red color. Now i changed the style.css into the following:
/* Adjust Menu (black) text color, (Helvetica) font-family, (1em) 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: black;
font-family: Helvetica;
font-size: 1em;
padding: 5px 20px;
}
and nothing is happening. What am i doing wrong?
Hello i have two nav bars displayed under the blog tab only, any ideas as to how can i fix this? thank you http://www.antonioarellano.com
Thanks you!
Hi,
I would like to make the navbar box disappear, but not the tag line and menu options.
Thanks-in-advance
Hi Buffy,
This CSS code should do the trick :
.navbar-inner { background: none!important; } .navbar .navbar-inner { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }Take care
The navbar box background color is changed by your snippet nicely for Safari and firefox
/* Adjust Navbar Box settings */ .tc-header, .navbar.notresp .navbar-inner { background-color: #ccad38; }However, it renders properly everywhere except IE. The website below mentions a problem with IE and Twitter bootstrap filters for IE
http://www.anujgakhar.com/2012/09/05/twitter-bootstrap-navbar-color-in-ie89/
Setting
.navbar-inner{ filter:none;}worked for me
Actually, there is something I don’t understand:
How to have more space under the text? It is really at the bottom of the box
Don’t have a website link, but the usual way to achieve more whitespace would be by adding
.navbar.notresp .navbar-inner {min-height: 999px /* change 999 */;
}
Hi,
I added your cool snippet! But I have an issue. Take a look at the website. Can you help me please?
thank you
/* Adjust Menu (red) text color, (helvetica) 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: inherit; color: #0F0; font-family: helvetica; font-size: 1.5em; padding: 5px 30px;Nevermind, I figured out it was the inherit. Great snippet!
Hello, I have tried in various ways without success.
I would like to decrease the height of the menu by moving the icons on the same level of social connections
Also how do I remove the outline and the background of the menu?
Thank you for the work you do and for this wonderful theme!
My site is displaying the mobile navigation with a white background and I’ve set my nav text color to white. Anyone know how to change the background display color for mobile with some CSS?
Hi Dave – I tried using your nav. nav-collapse. nav. suggestion to change just the responsive menu text color from the current color of white, to black. I tried this, but it changed the whole menu, not just the responsive, any idea what I’m doing wrong? Thanks!
/* Adjust Menu colors - Normal */ .navbar .nav > li > a, .navbar .nav-collapse .nav > li > a:first-letter { color: black; text-shadow: none; }</pre)Hi,
I have the same problem, my site is displaying the mobile navigation with a light grey background and the hover items are the same color.
I tried this snippet, with the .navbar .nav-collapse .nav trick, but it still change my main menu bar, and only the font and not the color…
How to change the background or text color of the dropdown menu in its mobile site version only ?
My site is displaying the mobile navigation with a white background and I’ve set my nav text color to white. Anyone know how to change the background display color for mobile?
Is there a change I can make to just effect my side menu widget. I assume it involves “.widget_nav_menu” vs .navbar .nav ?
I am using the black CSS and would like white Text white with no focus or hover.
Snippet updated to handle collapsed menu.
Snippet refreshed.
Most of these Snippets are tested standalone, so it is possible that when added to other CSS code they don’t work quite as intended. I’d suggest the Forum would be a better place to get a solution for this, and include a link to your Site.
Thanks for using Customizr.
Hello thank you for this help ! However there is something I can’t change. When I click on the menu just to show the submenu (dropdown menu). The menu’s title of the higher menu is still in green (=the color of the chosen skin). How can I change this please ?
Thanks !