Theme Customizer: Live Preview CSS by Media Query

  • I’m using the Theme Customization API to allow changes to all website colors. My website is responsive and the navigation changes for mobile devices. My CSS looks similar to the following:

    nav { background-color: #fff; }
@media only screen and max-width 767px {
	nav { background-color: #b00; }
}

    I set them all up as follows, but I’m not able to figure out how to make this bind to a media query.

    wp.customize( 'background_color', function( value ) {
	value.bind( function( newval ) {
		$('nav').css('background-color', newval );
	} );
} );

    Any help would be appreciated.

    Thanks

Viewing 1 replies (of 1 total)
  • Thread Starter oddcomments

    (@oddcomments)

    I ended up getting the answer at stackoverflow. If anyone runs into this, the answer is to wrap it in an if ($(window).width() < 768). The modified code is as follows:

    if ($(window).width() < 768) {
	wp.customize( 'background_color', function( value ) {
		value.bind( function( newval ) {
			$('nav').css('background-color', newval );
		} );
	} );
}

    One flaw, however, is that it doesn’t work if you start larger and resize. The response to that was to use $(window).trigger('resize'); and load it on $(document).ready(function() { $(window).trigger('resize'); });

Viewing 1 replies (of 1 total)
  • The topic ‘Theme Customizer: Live Preview CSS by Media Query’ is closed to new replies.