Enzo on "Can't edit the CSS of the Navbar, through an option in Customize"

Hello everyone,

Thanks for taking the time to read this post. Now, I am aware this question has been asked quite a number of times, but the results I found always ended up in directly editing the theme's CSS. I'm afraid this isn't an option for me.

See, I'm editing the function.php and header.php to create a colour picking option in Customize Site - Color.

Everything seems to work just dandy. The content, widgets, sidebars, backgrounds, everything. But for some peculiar reason the navigation bar seems to elude this succesful streak. And frankly, it's kind of bugging me since I can't seem to figure it out.

// THEME COLOUR CUSTOMIZATION
add_filter( 'customize_register', 'hg_customize_register' );
function hg_customize_register($wp_customize)
{
  $colors = array();

  // Main Content
    $colors[] = array( 'slug'=>'content_link_color', 'default' => '#88C34B', 'label' => __('Content Link Color', 'Toppen' ) );
	$colors[] = array( 'slug'=>'content_text_color', 'default' => '#000000', 'label' => __( 'Content Text Color', 'Toppen' ) );

  // Side Bar
	$colors[] = array( 'slug'=>'content_sidebar_color', 'default' => '#ffffff', 'label' => __( 'Sidebar Header Color', 'Toppen' ) );
    $colors[] = array( 'slug'=>'sidebar_bg_color', 'default' => '#ffffff', 'label' => __( 'Sidebar Background Color', 'Toppen' ) );
	$colors[] = array( 'slug'=>'sidebar_content_color', 'default' => '#000000', 'label' => __( 'sidebar Content Color', 'Toppen' ) );
	$colors[] = array( 'slug'=>'sidebar_bg2_color', 'default' => '#ffffff', 'label' => __( 'Sidebar Header Background Color', 'Toppen' ) );

  // Navigatie Bar
	$colors[] = array( 'slug'=>'nav_bg_color', 'default' => '#000000', 'label' => __( 'Navigatie Background Color', 'Toppen' ) );

  // Extra
	$colors[] = array( 'slug'=>'button_bg_color', 'default' => '#000000', 'label' => __( 'Search Button Color', 'Toppen') );  

  foreach($colors as $color)
  {
    // SETTINGS
    $wp_customize->add_setting( $color['slug'], array( 'default' => $color['default'], 'type' => 'option', 'capability' => 'edit_theme_options' ));

    // CONTROLS
    $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, $color['slug'], array( 'label' => $color['label'], 'section' => 'colors', 'settings' => $color['slug'] )));
  }
}

And in the header, I'm using:

<?php
	wp_head(); 

	// Main Content
	$content_link_color = get_option('content_link_color');
	$content_background_color = get_option('content_background_color');
	$content_text_color = get_option('content_text_color');

	// Side Bar
	$content_sidebar_color = get_option('content_sidebar_color');
	$sidebar_text_color = get_option('sidebar_text_color');
	$sidebar_bg_color = get_option('sidebar_bg_color');
	$sidebar_content_color = get_option('sidebar_content_color');
	$sidebar_bg2_color = get_option('sidebar_bg2_color');

	// Navigatie Bar
	$nav_bg_color = get_option('nav_bg_color');

	// Extra
	$button_bg_color = get_option('button_bg_color');

	?>

	<style>
	<!-- Main Content -->
	body a { color:  <?php echo $content_link_color; ?>; }
	.container:before { background-color:  <?php echo $content_background_color; ?>; }
	body { color:  <?php echo $content_text_color; ?>; }	

	<!-- Side Bar -->
	#sidebar h3 { color:  <?php echo $content_sidebar_color; ?>; }
	#sidebar h3 { color:  <?php echo $content_sidebar_color; ?>; }
	.widget ul { background-color:  <?php echo $sidebar_bg_color; ?>; }
	.page-content a { color:  <?php echo $sidebar_content_color; ?>; }
	#sidebar h3 { background-color:  <?php echo $sidebar_bg2_color; ?>; }

	<!-- Navigatie Bar -->
	.navbar {
    background-color: <?php echo $nav_bg_color; ?>;
    border-bottom: <?php echo $nav_bg_color; ?>;
}

Now, as you can see, there are three parts responsible for the navigation bar. I'll copy them so you won't have to read that monster sized code if you don't want to:

In Functions.php we've got:
$colors[] = array( 'slug'=>'nav_bg_color', 'default' => '#000000', 'label' => __( 'Navigatie Background Color', 'Toppen' ) );

And in Header we got both:
$nav_bg_color = get_option('nav_bg_color');

and

.navbar {
background-color: <?php echo $nav_bg_color; ?>;
border-bottom: <?php echo $nav_bg_color; ?>;

Now, you're probably smirking, saying to yourselves "This is child's play, how can you not get this?" And honestly, it probably is easy. That was what I was thinking at the very least when I started this. After all, with Firebug (in Firefox) I managed to deduce that by editing the colors directly under, you got it, navbar, it changed, therefore concluding that it was indeed '.navbar' that I needed.

And yet it doesn't seem to work. So if anyone has any suggestions, maybe a wake up hammer or something to point out something I've been missing or a correction, I'd fully appreciate it.

Also, if this isn't the right place to ask this kind of question, sorry to y'all, I actually made the mistake earlier when I posted this question on WordPress.com. As you can imagine, yes, wrong place, didn't know that myself. So feel free to blow this topic up with an Alien Blaster or, at least, move it if it's wrong. xD

With friendly regards,
E. D.