Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress Build a Website with WordPress Customizing WordPress Themes Customizing WordPress Theme Files

change the color of the .navbar rule for style.css does not apply the change

hi, i am changing the navbar color by copying the color from the footer to my navbar on the CSS, but when i refresh it does not take place. I'm on a local server. here is my style.css

Theme Name: Twenty Thirteen Child
Theme URI: http://http://wordpresstreehouse.com//
Description: Child theme for the Twenty Thirteen theme
Author: Zac Gordon
Author URI: http://wp.zacgordon.com/
Template: twentythirteen
Text Domain: twenty-thirteen-child
Version: 1.0

@import "../twentythirteen/style.css";

.navbar {
    background-color: #220e10;

thank you!

12 Answers

Robert Gouveia
Robert Gouveia
Courses Plus Student 1,714 Points

Looks like it is based on a child theme with the fact you are importing the css.

If you do this, it should work, if the navigation does have a class of navbar.

.navbar {
    background-color: #220e10 !important;

I am not a huge fan of using the !important; but sometimes if the css is being loaded before the existing class in css you need to use it else its impossible to change.

tried adding the !important with the exclamation sign and does not change the color. hmm...

Robert Gouveia
Robert Gouveia
Courses Plus Student 1,714 Points

can you link it to the course work and I will take a look for you ;)

yes but, excuse my ignorance what is the course work? how can i link it??

mmm we have no course work for this particular video

Robert Gouveia
Robert Gouveia
Courses Plus Student 1,714 Points

Course work is the online editor that comes in the project.

have you tried the #navbar instead of .navbar?

Without seeing it live I cant really see what is happening and what css is stopping yours from working.

yes, i tried the #navbar but still does not change.

now, i've tried also

navbar {background-color: #220e10; !important;}
.navbar {background-color: #220e10; !important;}
#navbar {background-color: #220e10; !important;}

but none of them work, i cleaned the cache and erased the history

Sandra Hogan
Sandra Hogan
8,657 Points

Is it possible that the syntax you have tried isn't quite right? From a quick search, it looks like you might have an extra semi-colon in your examples above.

#example { font-size: 14px !important; }

i have it on MAMP Apache: 80 Ngynx: 7888 MySQL: 3306


Robert Gouveia
Robert Gouveia
Courses Plus Student 1,714 Points

This may be a silly question but have you activated the child theme in the admin area?

jaja Yes Sir, i did activated it

Robert Gouveia
Robert Gouveia
Courses Plus Student 1,714 Points

Have you made the functions.php show the css correctly?

For instance:

function my_theme_enqueue_styles() {

    $parent_style = 'twentythirteen-style'; // This is 'twentyfifteen-style' for the Twenty Fifteen theme.

    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

That is the only other thing I can think of

i tried, i tried with functions.php linking the css correctly but it doesn't works. maybe i should contact the support team and tell them this story...


thanks Sandra Hogan, i tried the examples without the extra semi-colons. it didn't worked.

i'm trying to figure out what can be missing.

Alena Holligan
Alena Holligan
Treehouse Teacher

I would guess that the css is not being included correctly for some reason.

  1. Go the the website
  2. View Source
  3. look for the style.css file
  4. see if the file matches the one you're expecting: "Theme Name: Twenty Thirteen Child" with you .navbar style
Jessica Murillo
Jessica Murillo
9,119 Points

I'm really late but is your parent theme folder in the same folder as your child them?