WordPress.org

Ready to get started?Download WordPress

Forums

Theme Customizer: Live Preview CSS by Media Query (2 posts)

  1. oddcomments
    Member
    Posted 5 months ago #

    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

  2. oddcomments
    Member
    Posted 5 months ago #

    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'); });

Reply

You must log in to post.

About this Topic