CSS固定标头 - 放大时无法访问标签

Question

我使用position的值fixed，以便在用户向下滚动时标头保持原位。

的问题是，如果我在我变焦无法查看或访问我的一些标签，例如：

有没有办法放大，仍然是能够看到和访问我的标签？

我的代码：

JSFIDDLE CODE

HTML：

<div id="top"> 
    <header> 
     <hgroup> 
      <h1>LOGO</h1> 
     </hgroup> 
     <nav> 
      <ul> 
       <li class="tabs"><a href="#">First</a></li> 
       <li class="tabs"><a href="#">Second</a></li> 
       <li class="tabs"><a href="#">Third</a></li> 
       <li class="tabs"><a href="#">Fourth</a></li> 
      </ul> 
     </nav> 
    </header> 

CSS：

#top { 
    background-color: #1b1b1b; 
    box-shadow: 0px 0px 9px rgba(0,0,0,0.15); 
    padding: 20px 100px; 
    width: 100%; 
    height: 70px; 
    z-index: 99999; 
    position: fixed; 
    top: 0; 
    left: 0; 
} 
header { 
    position: relative; 
    width: 440px; 
    height: 70px; 
    margin: 0 auto; 
} 
header hgroup { 
    position: absolute; 
    display: block; 
    top: 5px; 
    left: -50px; 
} 
header hgroup h1 { 
    font-size: 50px; 
    color: #fff; 
    display: block; 
    height: 100px; 
    width: 610px; 
} 
nav { 
    float: right; 
} 
nav ul li:hover > ul { 
    display: block; 
} 
nav ul { 
    margin-top: 10px; 
    padding: 0 20px; 
    list-style: none; 
    position: relative; 
    display: inline-table; 
    margin-right: -80px; 
} 
nav ul:after { 
    content: ""; 
    clear: both; 
    display: block; 
} 
nav ul li { 
    float: left; 
} 
nav ul li:hover { 
    color: #fff; 
} 
.tabs:hover { 
    border-bottom: 5px solid #fff; 
} 
nav ul li a:hover { 
    color: #fff; 
} 
nav ul li a { 
    display: block; 
    padding: 15px 15px;  
    font-family: 'PT Sans', sans-serif; 
    color: #fff; 
    text-decoration: none; 
} 

Answer 1

不要使用固定宽度为您header，使用100%代替：

#top { 
    background-color: #1b1b1b; 
    box-shadow: 0px 0px 9px rgba(0,0,0,0.15); 

    width: 100%; 
    height: 70px; 
    z-index: 99999; 
    position: fixed; 
    top: 0; 
    left: 0; 
} 
header { 
    position: relative; 
    width: 100%; 
    height: 70px; 
    margin: 0 auto; 
} 

Updated Fiddle