functions.php

<?php // Do not include if already this line if it already exists in functions.php

/**
 * Create a gray header/navbar area.
 */
add_action( 'bigbox_customize_inline_css', function( $css ) {
	$gray300 = bigbox_get_theme_color( 'gray-300' );
	$gray500 = bigbox_get_theme_color( 'gray-500' );
	$gray700 = bigbox_get_theme_color( 'gray-700' );

	$css->add( [
		'selectors'    => [
			'.navbar',
		],
		'declarations' => [
			'background-color' => '#e8e8e8',
			'border-bottom'    => '1px solid rgba(0, 0, 0, 0.1)',
			'box-shadow'       => 'rgba(219,219,219,0.5) 0 1px 2px',
		],
	] );

	$css->add( [
		'selectors'    => [
			'.navbar-search',
		],
		'declarations' => [
			'box-shadow' => '0 0 5px rgba(0, 0, 0, 0.10)',
			'border'     => esc_attr( '1px solid ' . $gray300 ),
		],
	] );

	$css->add( [
		'selectors'    => [
			'.site-title a',
			'.site-title a:hover',
			'.navbar-menu--account a',
			'.navbar-menu--account a:hover',
			'.navbar-menu--primary .navbar-menu__items > .menu-item > a'
		],
		'declarations' => [
			'color' => esc_attr( $gray700 ),
		],
	] );

	$css->add( [
		'selectors'    => [
			'.navbar-menu--primary .navbar-menu__items > .menu-item-has-children > a:after',
		],
		'declarations' => [
			'border-top-color' => esc_attr( $gray500 ),
		],
	] );
	
	$css->add( [
		'selectors'    => [
			'.navbar-menu--account .menu-item svg',
			'.navbar-menu--primary .menu-item svg',
		],
		'declarations' => [
			'fill' => esc_attr( $gray500 ),
		],
	] );

	$css->add( [
		'selectors'    => [
			'.navbar-menu--account .menu-item:hover svg',
			'.navbar-menu--primary .menu-item:hover svg',
			'.navbar-mobile-toggle--open:hover .bigbox-icon',
			'.navbar-mobile-toggle--open .bigbox-icon',
		],
		'declarations' => [
			'fill' => esc_attr( $gray700 ),
		],
	] );

	$css->add( [
		'selectors'    => [
			'.navbar-menu--primary',
		],
		'declarations' => [
			'border-top' => '1px solid rgba(0, 0, 0, 0.05)',
		],
	] );
} );