How to apply a different logo to the sticky header

Please Note: Theme customizations go beyond the scope of our support services and this article is provided solely as a courtesy to our customers. Please take a moment to review the Scope of our Support.

Sometimes depending on the size and shape of your logo, it might not look well when it is resized in the sticky header. In this case, if you would like to set a custom logo image that will be displayed once the viewer has scrolled down and the sticky header is activated, you will need to add the following CSS to the Story Options -> Typography & Styles -> Additional Styles section:

.fixed-header-scroll #logo-container a {
  background-image: url("LOGO-IMAGE-URL") !important;
  background-size:cover;
  width:50px;
  height:50px;
}
.fixed-header-scroll #logo-container img{
 display:none;
}

After you add the snippet, make sure to replace the LOGO-IMAGE-URL with the URL of your custom image and replace the 50px values with the corresponding image width and height values.

Article Keywords: Sticky Header, logo change, different logo, seperate logo for sticky headed, header logo, logo size