Shrinking header logo working on desktop, but need to remove feature on mobile

[taylorbw334]

I used the below CSS and JS to accomplish the shrinking logo in nav. It’s not working properly on mobile, so I would like to disable for those sizes. Is there CSS / JS for this?

Site: http://rowlandstaging.rowlandstrategies.com

CSS
@media(min-width: 980px){
a.x-brand.img.resize-logo img {
width: 100px;
transition: all 100ms linear;
}
a.x-brand.img img {
width: 200px;
transition: all 100ms linear;
}
}

JS
jQuery(document).ready(function($){
$(window).scroll(function(){
if ($(this).scrollTop() > 50) {
$(’.x-brand’).addClass(“resize-logo”);
} else {
$(’.x-brand’).removeClass(“resize-logo”);
}
});
});

[ruenel]

Hello @taylorbw334,

Thanks for writing in!

Please be informed that your custom css will only be applied for screens that is larger than 980 pixels. This is why there is no shrinking of images in smaller screens. If you want to apply it in smaller screens, you will have to update the custom css and use this instead:

 a.x-brand.img.resize-logo img {
  width: 100px;
  transition: all 100ms linear;
}

a.x-brand.img img {
  width: 200px;
  transition: all 100ms linear;
}

Hope this helps.

[taylorbw334]

Thank you for the reply.

This solution does not work on mobile.

here is an example of what i’m trying to achieve: http://www.fellspointfest.net

On mobile, I would like the logo to stay within the navbar as it look once you scroll down.

[ruenel]

Hey @taylorbw334,

To resolve your issue, please use this custom JS script:

jQuery(document).ready(function($){
    $(window).scroll(function(){
        if ($(this).scrollTop() > 50) {
            $('.x-brand').addClass("resize-logo");
        } else {
            $('.x-brand').removeClass("resize-logo");
        }
    });
});

And then use this custom css:

@media(min-width: 980px){
    .x-brand.img.resize-logo img {
        width: 150px;
        transition: all 100ms linear;
    }

    .x-brand.img img {
        width: 200px;
        transition: all 100ms linear;
    }
}


@media(max-width: 979px){
    .x-brand img {
        width: 100px;
        position: relative;
        margin-top: 0;
        margin-bottom: 0;
    }
}

We would love to know if this has worked for you. Thank you.