固定位置不适用于页眉

我正在尝试固定标题，以便它与移动设备和台式机页面一起滚动。事情是，它早先起作用了，但是当我继续编码时，它停止了工作。我试图摆脱代码，看看是否有任何代码在影响它，但事实并非如此。

这是HTML代码：

<div class='wrapper'>
  <div class='sidebar'>
    <div class='title'>
    </div>
    <ul class='nav'>
      <li><a href="index.html">Home</a></li>
      <li><a href="#about">About Us</a></li>
      <li><a href="publications.html">Publications</a></li>
      <li><a href="conferences.html">Conferences</a></li>
      <li><a href="#contact">Contact Us</a></li>
      </ul>
  </div>

<div class='content isOpen'>
<header>
    <div class="mobile grid">
    <div class="unit unit-s-2-3 unit-m-1-3 unit-l-1-3">
        <a href="index.html"><img src="img/logo.svg" class="flex-logo"></a>
    </div>
    <div class="unit unit-s-1-3 unit-m-2-3 unit-m-2-3-1 unit-l-2-3">
        <a class='button'></a>
    </div>
    </div>

    <div class="grid desktop">
        <div class="unit unit-s-1 unit-m-1-3 unit-l-1-3">
            <div class="unit unit-s-1 unit-m-1-3 unit-l-1-3 left">
                <a href="index.html"><img src="img/logo-square.svg" class="flex-logo"></a>
            </div>

            <div class="unit unit-s-1 unit-m-2-3 unit-l-2-3 desktop">
                <h1>International Academy of Science, Engineering, and Techonology</h1>
            </div>
        </div>

        <div class="unit unit-s-1 unit-m-2-3 unit-l-2-3 desktop-nav">
            <nav>
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="#about">About Us</a></li>
                    <li><a href="publications.html">Publications</a></li>
                    <li><a href="conferences.html">Conferences</a></li>
                    <li><a href="#contact">Contact Us</a></li>
                </ul>
            </nav>
        </div>
    </div>
</header> <!-- END HEADER -->
</div></div>

这是CSS：

header {
position: fixed;
width: 100%;
background-color: #FFFFFF;
z-index: 999;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.wrapper {
  min-height: 100%;
  background-color: #AB1917;
}

.sidebar {
  position: absolute;
  width: 135px;
  background-color: #AB1917;
height: 100%;
right: 0;
}

.content {
  background: #FFF;
  box-shadow: 0 0 5px rgba(0,0,0,0.5);
  transform: translate3d(-135px,0,0);
  transition: transform .3s;
}

.content.isOpen {
  transform: translate3d(0px,0,0);
}

这是js：

<script type="text/javascript">
$(document).ready(function() {
  $('.button').on('click', function() {
    $('.content').toggleClass('isOpen');
  });
});
</script>

我尝试为标头指定高度，甚至使用粘性导航插件将其固定；但是这些都不起作用。而且我不确定该怎么办。

如果要在网站上查看问题，可以在以下位置查看：www.international-aset.com/intaset

谢谢！