仅制作标题转换的某些部分

Question

我想只制作标题转换的某些部分，但是目前所有过渡都是我不想要的，特别是＆＃34;幻灯片＆＃34;。我已经尝试将幻灯片放入一个单独的div并将其置于顶部，但即使使用Z-index也无法显示它。

相关代码：

CSS：

header{
  position: fixed;
  z-index:1;
  width: 100%;
  text-align: center;
  font-size: 60px;
  line-height: 108px;
  height: 100px;
  background: #335C7D;
  color: #fff;
  font-family: 'PT Sans', sans-serif;
    transition: all 0.4s ease;
}


header.sticky {
  font-size: 24px;
  line-height: 48px;
  height: 48px;
  background: #efc47D;
  text-align: left;
  padding-left: 20px;
} 

HTML：

<header>
<h1 id=>NZ Great Walks</h1> <div id="NHide">   
<ul>
    <li><a href="#slide1" title="Sample Text">Slide 1</a></li>
    <li><a href="#slide2" title="Sample Text">Slide 2</a></li>
    <li><a href="#slide1" title="Sample Text">Slide 3</a></li>
    <li><a href="#slide1" title="Sample Text">Slide 4</a></li>
</ul>
</div> 
</header> 

这是一个Jsfiddle（抱歉结构很差）

http://jsfiddle.net/pddmq95v/