How-to

1. Navigate to Admin > Design  and click on the theme you wish to add the Christmas light robe.

2. Click on Edit Style and go to Advanced tab

3. Paste the following code into Custom CSS (Advanced)  field

.lightrope {
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  position: absolute;
  z-index: 1;
  margin: 0;
  padding: 0;
  pointer-events: none;
  width: 100%;
}
.lightrope li {
  position: relative;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  list-style: none;
  margin: 0;
  padding: 0;
  display: block;
  width: 12px;
  height: 28px;
  border-radius: 50%;
  margin: 0 20px 20px;
  display: inline-block;
  background: #00f7a5;
  box-shadow: 0px 4.6666666667px 24px 3px #00f7a5;
  -webkit-animation-name: flash-1;
          animation-name: flash-1;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
}

.lightrope li:nth-child(2n+1) {
  background: #FFD700;
  box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 255, 255, 0.5);
  -webkit-animation-name: flash-2;
          animation-name: flash-2;
  -webkit-animation-duration: 0.4s;
          animation-duration: 0.4s;
}
.lightrope li:nth-child(4n+2) {
  background: #f70094;
  box-shadow: 0px 4.6666666667px 24px 3px #f70094;
  -webkit-animation-name: flash-3;
          animation-name: flash-3;
  -webkit-animation-duration: 1.1s;
          animation-duration: 1.1s;
}
.lightrope li:nth-child(3n+2) {
  background: rgba(102, 0, 125, 1);
  box-shadow: 0px 4.6666666667px 24px 3px rgba(102, 0, 125, 1);
  -webkit-animation-name: flash-4;
          animation-name: flash-4;
  -webkit-animation-duration: 1.1s;
          animation-duration: 1.1s;
}
.lightrope li:nth-child(odd) {
  -webkit-animation-duration: 1.8s;
          animation-duration: 1.8s;
}
.lightrope li:nth-child(3n+1) {
  -webkit-animation-duration: 1.4s;
          animation-duration: 1.4s;
}
.lightrope li:before {
  content: "";
  position: absolute;
  background: #418045;
  width: 10px;
  height: 9.3333333333px;
  border-radius: 3px;
  top: -4.6666666667px;
  left: 1px;
}
.lightrope li:after {
  content: "";
  top: -14px;
  left: 9px;
  position: absolute;
  width: 52px;
  height: 18.6666666667px;
  border-bottom: solid #418045 2px;
  border-radius: 50%;
}
.lightrope li:last-child:after {
  content: none;
}
.lightrope li:first-child {
  margin-left: -40px;
}
@-webkit-keyframes flash-1 {
  0%, 100% {
    background: #FFD700;
    box-shadow: 0px 4.6666666667px 24px 3px #FFD700;
  }
  50% {
    background: rgba(255, 215, 0, 0.4);
    box-shadow: 0px 4.6666666667px 24px 3px rgba(255, 215, 0, 0.2);
  }
}
@keyframes flash-1 {
  0%, 100% {
    background: #FFD700;
    box-shadow: 0px 4.6666666667px 24px 3px #FFD700;
  }
  50% {
    background: rgba(255, 215, 0, 0.4);
    box-shadow: 0px 4.6666666667px 24px 3px rgba(255, 215, 0, 0.2);
  }
}
@-webkit-keyframes flash-2 {
  0%, 100% {
    background: rgba(0, 170, 0, 1);
    box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 170, 0, 1);
  }
  50% {
    background: rgba(0, 170, 0, 0.4);
    box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 255, 255, 0.2);
  }
}
@keyframes flash-2 {
  0%, 100% {
    background: rgba(0, 170, 0, 1);
    box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 170, 0, 1);
  }
  50% {
    background: rgba(0, 170, 0, 0.4);
    box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 170, 0, 0.2);
  }
}
@-webkit-keyframes flash-3 {
  0%, 100% {
    background: rgba(255, 53, 53, 1);
    box-shadow: 0px 4.6666666667px 24px 3px rgba(255, 53, 53, 1);;
  }
  50% {
    background: rgba(255, 53, 53, 0.4);
    box-shadow: 0px 4.6666666667px 24px 3px rgba(255, 53, 53, 0.2);
  }
}
@keyframes flash-3 {
  0%, 100% {
    background: rgba(255, 53, 53, 1);
    box-shadow: 0px 4.6666666667px 24px 3px rgba(255, 53, 53, 1);;
  }
  50% {
    background: rgba(255, 53, 53, 0.4);
    box-shadow: 0px 4.6666666667px 24px 3px rgba(255, 53, 53, 0.2);
  }
}
@-webkit-keyframes flash-4 {
  0%, 100% {
    background: rgba(102, 0, 125, 1);
    box-shadow: 0px 4.6666666667px 24px 3px rgba(102, 0, 125, 1);;
  }
  50% {
    background: rgba(102, 0, 125, 0.4);
    box-shadow: 0px 4.6666666667px 24px 3px rgba(102, 0, 125, 0.2);
  }
}
@keyframes flash-4 {
  0%, 100% {
    background: rgba(102, 0, 125, 1);
    box-shadow: 0px 4.6666666667px 24px 3px rgba(102, 0, 125, 1);;
  }
  50% {
    background: rgba(102, 0, 125, 0.4);
    box-shadow: 0px 4.6666666667px 24px 3px rgba(102, 0, 125, 0.2);
  }
}

4. Paste the following code into Custom Code

<script>
jQuery( window ).load(function() {
 jQuery('.header-menu-container').append('<ul class="lightrope"><li></li<li></li><li></li><li></li><li></li><li></li><li></li></li><li></li><li></li><li></li><li></li><li><li></li><li></li><li></li><li></li><li></li><li></li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>')
});
</script>

5. Check the theme and Happy Christmas!