Fixed Navigation on Internet Explorer Covering Page

Site URL: https://www.biocleandd.com

I have a fixed header (Brine Template) that looks great everywhere - except on Internet Explorer (my client is amoung the 4 people in the world that still use that). The header covers the top of each page.  Anyone have a work around, settings or code fix?

Add the following JS below. This adds padding to the body equal to the height of the header to push the content down:

(function (document, window) {

  if(document.readyState !== 'complete') {
    window.addEventListener('DOMContentLoaded', function(event){
      init();
    });
  } else {
    init();
  }
  
  function init(){
    var isIE10 = navigator.appVersion.indexOf('MSIE 10') !== -1;
    var isIE11 = !!window.MSInputMethodContext && !!document.documentMode;

    // Exit if we're not in an IE browser.
    if (!isIE11 || !isIE10) return;

    // Add padding to the body based on the height of the Header
    addPaddingToBody();

    // Re-calculate body padding when user resize browser
    window.addEventListener('resize', debounce(function () {
      addPaddingToBody();
    }, 200));
  }

  function addPaddingToBody() {
    var header = document.querySelector('Header');
    var headerHeight = header.offsetHeight;
    document.body.style.paddingTop = headerHeight + 'px';
  }

  function debounce(func) {
    var wait = arguments.length <= 1 || arguments[1] === undefined ? 100 : arguments[1];

    var timeout = void 0;
    return function () {
      var _this = this;

      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
        args[_key] = arguments[_key];
      }

      clearTimeout(timeout);
      timeout = setTimeout(function () {
        func.apply(_this, args);
      }, wait);
    };
  }
})(document, window);

Make sure the JS code is between <script> tags, example:

<script>
  // Add JS code here
</script>