Theme customizer won't save theme options

I have the following code in my functions.php file:

function bold_headline_theme_customizer( $wp_customize ) {

	$wp_customize->add_setting( 'bold_headline[nav_color]', array(
        'default'   => '#404040',
        'transport' => 'postMessage',
    ) );

    $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'bold_headline[nav_color]', array(
        'label'	   => 'Navigation Bar Color',
        'section'  => 'colors',
        'settings' => 'bold_headline[nav_color]',
    ) ) );

}
add_action('customize_register', 'bold_headline_theme_customizer');

...

function bold_headline_add_customizer_css() {
	<style>
		.navigation-main,
		.navigation-main ul ul {
			background: <?php echo get_theme_mod( 'bold_headline[nav_color]', '#404040' ); ?>;
		}

	</style>
<?php }
add_action( 'wp_head', 'bold_headline_add_customizer_css' );

My javascript file has the following:

wp.customize( 'bold_headline[nav_color]', function( value ) {
        value.bind( function( to ) {
            $('.navigation-main, .navigation-main ul ul').css('background', to );     

        });
    });

I’m enqueuing the js has recommended.
If I use the setting bold_headline[nav_color] I can customize the colour and see it in the preview. i.e, the javascript is doing what it’s supposed to. However, no value is picked up by get_theme_mod and the css is left blank.

If I change the value from bold_headline[nav_color] to nav_color, then the custom CSS displays as it should in the header, but the js stops working.

I’m clearly missing something somewhere and would love a fresh set of eyes to look at this.

🙁

Thanks