Change the Navbar Colors/Font/Size 9


Last Reviewed: 29-Mar-14

If you need to change the Navbar Colors/Font/Size:

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.

 

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

 


About Dave Bardell

My name is Dave Bardell (@rdellconsulting) and have been supporting the Forum since discovering this wonderful Theme. Have learnt a lot from other Supporters (@acub, @tomaja, @ElectricFeet, in particular). Have a library of snippets I've built up which in adding here, I'll try to acknowledge the original contributor but apologies to any I miss or wrongly attribute. daveb@rdellconsulting.com


9 thoughts on “Change the Navbar Colors/Font/Size

  • Reply
    Brice

    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 !

  • Reply
    Dave Bardell Post author

    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.

  • Reply
    Roy Martin

    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.

  • Reply
    Carrie

    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?

  • Reply
    Carrie

    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?

    • Reply
      Carrie

      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)
  • Reply
    Luca

    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!

Leave a Comment

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

Do you need to share some code? To display it in a nice looking syntax highlighter, wrap your code between the following tags (css code in this example) : <pre class="lang:css">YOUR CODE</pre> ( possible code language acronyms : css, php, xhtml, javascript, sql)

You may also use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">