The mystery of the disappearing logo

Site URL: http://www.jolsendesign.com/

Hello!

I recently added some custom code injection to my website to my headline text (it now changes color when moused over!) Somehow doing this made my logo disappear 😞 Does anyone have an idea of how to bring the logo back? I know it's an issue with the code injection, when I delete it the logo re-appears, I suspect I haven't defined a parameter? I'm new to this type of thing.

Thanks for your help!!

Here's what I added to create this effect. 

Custom CSS:

.text-hover span {
  transition: color 3s;
  transition-delay: 1s;
}

.text-hover span:hover {
  transition: color 0s;
}

.text-hover span:nth-child(1n):hover {
  color: #FC8B27;
}

.text-hover span:nth-child(2n):hover {
  color: #3AA09B;
}

.text-hover span:nth-child(3n):hover {
  color: #84C174;
}

Code Block:

<h1 class='text-hover'>
  HELLO, I’M JESSICA OLSEN. I’M A USER EXPERIENCE DESIGNER.
</h1>

Code Injection: 

<script>
  function _toArray(arr) {
    return Array.isArray(arr) ? arr : Array.from(arr)
  }
  function makeSpans (selector) {
    var _document$querySelect = document.querySelectorAll(selector)
    var _document$querySelect2 =_toArray(_document$querySelect)
    var elements = _document$querySelect2.slice(0)
    return elements.map(function (element) {
      var text = element.innerText.split('')
      var spans = text.map(function (letter) {
        return '<span>' + letter + '</span>'
      }).join('')
      return element.innerHTML = spans
    })
  }
  makeSpans('h1')
</script>

Just now, Jesszz said:

Site URL: http://www.jolsendesign.com/

Hello!

I recently added some custom code injection to my website to my headline text (it now changes color when moused over!) Somehow doing this made my logo disappear 😞 Does anyone have an idea of how to bring the logo back? I know it's an issue with the code injection, when I delete it the logo re-appears, I suspect I haven't defined a parameter? I'm new to this type of thing.

Thanks for your help!!

Here's what I added to create this effect. 

Custom CSS:

.text-hover span {
  transition: color 3s;
  transition-delay: 1s;
}

.text-hover span:hover {
  transition: color 0s;
}

.text-hover span:nth-child(1n):hover {
  color: #FC8B27;
}

.text-hover span:nth-child(2n):hover {
  color: #3AA09B;
}

.text-hover span:nth-child(3n):hover {
  color: #84C174;
}

Code Block:

<h1 class='text-hover'>
  HELLO, I’M JESSICA OLSEN. I’M A USER EXPERIENCE DESIGNER.
</h1>

Code Injection: 

<script>
  function _toArray(arr) {
    return Array.isArray(arr) ? arr : Array.from(arr)
  }
  function makeSpans (selector) {
    var _document$querySelect = document.querySelectorAll(selector)
    var _document$querySelect2 =_toArray(_document$querySelect)
    var elements = _document$querySelect2.slice(0)
    return elements.map(function (element) {
      var text = element.innerText.split('')
      var spans = text.map(function (letter) {
        return '<span>' + letter + '</span>'
      }).join('')
      return element.innerHTML = spans
    })
  }
  makeSpans('h1')
</script>

Change this line makeSpans('h1') to makeSpans('h1.text-hover')