I don’t think this can be done using CSS but here’s a really rough javascript/jQuery code that I think you could use. Just place the following code in the “script.js” file ( just below the first line of code ) located inside the “js/” folder of the theme:

$orig_logo = $('header .logo').find('img').attr('src');
$smaller_devices_logo = 'http://2.envato-static.com/images/themeforest/logo-dark.png?1343100282';


function changeLogo() {

    var responsive_viewport = $(window).width();

     /* if is below 481px */
    if (responsive_viewport < 481) {
        $('header .logo').find('img').attr('src', $smaller_devices_logo);
    } /* end smallest screen */
    else {
        $('header .logo').find('img').attr('src', $orig_logo);


$(window).resize( function() {



Just change the value for the $smaller_devices_logo variable to the image address of your logo for smaller devices.

VN:F [1.9.22_1171]
Rating: 0.0/5 (0 votes cast)