Santa-hat

by mtenschert

HTML

<div class="logo" style="background:#b62125;">
  <a target="_self">
<img class="logo__alpinresorts" src="https://www.alpinresorts.com/assets/images/logo.png">
</a>
  <img class="santa-hat" src="https://www.alpinresorts.com/uploads/newsletter/santa-hat.png">
</div>

CSS

@media only screen and (min-width: 1215px) {
  .action-xmas {
    margin-top : 8px;
  }

  .santa-hat {
    position : absolute;
    top : -6px;
    left : 247px;
    width : 50px;
    height : 50px;
  }
}
@media screen and (max-width: 1214px) and (min-width: 991px) {
  .action-xmas {
    margin-top : 0px;
  }

  .santa-hat {
    display : none;
  }
}
@media only screen and (max-width: 990px) {
  .action-xmas {
    margin-top : 0px;
  }

  .santa-hat {
    position : absolute;
    top : 1px;
    left : 120px;
    width : 28px;
    height : 28px;
  }
}

JavaScript

$(".logo").addClass("action-xmas");