Change mobile logo on scroll | Masonry theme

Technical Q&A
1

Hello,

Appreciate any help here:

I am looking to have my logo change to a different version when the user scrolls down.

Right now, it’s not loading the logo at first, and then I believe only loads the class “lrg_logo” upon scroll.

Shop link: https://fibonacho.co

Here’s what I’ve figured out so far:

In h****eader.liquid, I added:


        
        
        
                
          
          {% if section.settings.lrg_logo != blank %}
          {% capture image_size %}{{ section.settings.logo_max_width }}x{% endcapture %}
          
          	
          	
          	
          
          {% else %}
          
          {{ shop.name }}
          
          {% endif %}
          
          {% if section.settings.sml_logo != blank %}
          {% capture image_size %}{{ section.settings.logo_max_width }}x{% endcapture %}
          
          	
          	
          	
          
          {% else %}
          
          {{ shop.name }}
          
          {% endif %}

And in h****eader.liquid under {% schema %}, I added:

{
        "type": "image_picker",
        "id": "lrg_logo",
        "label": "Large Mobile Logo",
        "info": "240px wide (recommended)"
      },

      {
        "type": "image_picker",
        "id": "sml_logo",
        "label": "Small Mobile Logo",
        "info": "240px wide (recommended)"
      },

In custom.js, I added:

$(function() { var logo = $(".lrg_logo"); $(window).scroll(function() {
var scroll = $(window).scrollTop();

    if (scroll >= 10) {
      if(!logo.hasClass("sml_logo")) {
        logo.hide();
        logo.removeClass('lrg_logo').addClass("sml_logo").fadeIn( "slow");
      }
    } else {
      if(!logo.hasClass("lrg_logo")) {
        logo.hide();
        logo.removeClass("sml_logo").addClass('lrg_logo').fadeIn( "slow");
      }
    }

});
});

in styles.css.liquid, here is all the current markup that I believe pertains to the logo.

Not sure if this has a bunch of redundant classes:

.shoplogo {
  background: {{ logo_bg_col }};
  font-family: {{ logo_font.family }}, {{ logo_font.fallback_families }};
  font-weight: {{ logo_font.weight }};
  font-style: {{ logo_font.style }};
  font-size: 20px;
  line-height: 1.4em;
  text-align: center;
}

@media (min-width: 480px) {
.mobilelogo {
  display: none;
}
}

.shoplogo,
.shoplogo .logotext {
  color: {{ font_col_shoptitle }};
  text-decoration: none;
}

.shoplogo .logoimg {
  display: block;
}

.lrg_logo {
  display: none;
}

.sml_logo {
  display: none;
}

@media (max-width: 480px) {
  .shoplogo .logoimg {
  visibility: hidden;
}
  
  .mobilelogo {
  position: relative;
  width: 50%;
}
  
  .lrg_logo {
  position: relative;
}
  
  .sml_logo {
  position: relative;
}
  
}

.shoplogo img {
  max-width: 100%;
  vertical-align: top;
}

.shoplogo .logotext {
  display: block;
  text-align: left;
  padding: 30px {{ sidebar_gutter }}px;
}

#navbar {
  position: fixed;
  background: {{ panel_bg_col }};
  color: {{ panel_txt_pri_col }};
  top: 0;
  left: 0;
  width: {{ sidebar_width }}px;
  height: 100%;
  font-size: {{ medium_font_size }}px;
  z-index: 5;
  transition: left 250ms ease;
  overflow: visible;
}

#navbar .shoplogo.with-margin .logoimg {
  margin: {{ sidebar_gutter }}px;
}

.page-header .shoplogo {
  display: none;
}

.page-header .shoplogo .logotext {
  margin-top: 20px;
  margin-bottom: 20px;
  padding: 0;
  text-align: center;
  font-size: 80%;
  line-height: 1.2em;
}

.page-header .shoplogo.with-margin {
  margin-top: {{ sidebar_gutter | divided_by: 2 }}px;
  margin-bottom: {{ sidebar_gutter | divided_by: 2 }}px;
}

.page-header .shoplogo.with-margin .logotext {
  margin-top: 0;
  margin-bottom: 0;
}

@media (max-width: {{ tablet_snap_width }}px) {
  .page-header {
    position: fixed;
    height: auto;
    text-align: center;
    padding: 0;
    background: {{ panel_bg_col }};
    color: {{ panel_txt_pri_col }};
  }
  .page-header svg {
    fill: {{ panel_txt_pri_col }};
    margin-top: -2px;
  }
  .page-header .page-header__inner {
    position: relative;
    background: {{ bg_col }};
    color: {{ font_col_shoptitle }};
  }
  .page-header .page-header__inner svg {
    fill: currentColor;
  }
  .page-header .nav-toggle {
    display: block;
    position: absolute;
    top: 50%;
    left: {{ mobile_gutter }}px;
    margin-top: -22px;
    width: 44px;
    height: 44px;
  }
  .page-header .nav-toggle svg {
    margin-top: 10px;
  }
  .page-header .shoplogo {
    display: inline-block;
    width: 125px;
  }
  .page-header .account-links {
    display: none;
  }
  .page-header .search-and-cart {
    position: absolute;
    top: 50%;
    right: {{ mobile_gutter }}px;
    margin-top: -0.5em;
    line-height: 1.2em;
  }
  .page-header .store-message.store-message--upper {
    display: none;
  }
  .page-header .store-message.store-message--lower {
    display: none;
  }
}

@media only screen and (max-width: {{ tablet_snap_width }}px) {
  #content {
    padding-top: 0;
    padding-left: 0;
  }
  .page-header {
    left: 0;
  }
  .page-footer {
    margin-left: 0;
  }
  #navbar {
    left: -{{ sidebar_width }}px;
  }
  .navbar--with-shadow {
    box-shadow: none;
  }
  #navbar .shoplogo {
    display: none;
  }
  .show-nav-mobile #navbar {
    left: 0;
    /* box-shadow: {{ sidebar_shadow }}; */
    overflow: hidden;
  }
  .show-nav-mobile {
    overflow: hidden;
  }
  .show-nav-mobile:after {
    opacity: 1;
    pointer-events: auto;
  }
}

I did not touch theme.js or theme.liquid.

Happy to provide additional details!