CSS のコンテナーの幅は 100% ですが、ページの終わりの少し手前で止まります。
使用される HTML
<div id="nav-container">
<ul id ="nav-list">
<li id="nav-title">lymbo</li>
<li><a href="#">Playmaps</a></li>
<li><a href="../map.html">Map</a></li>
<li><a href="../about.html">About</a></li>
<li><a href="#">My Account</a></li>
<li><a href="#">Log Out</a></li>
</ul>
</div>
使用される CSS
#nav-container {
width: 100%;
height: 50px;
position: fixed;
top: 0;
float: top;
padding-top: 15px;
text-align: left;
-webkit-box-shadow: 0px 0px 8px 0px #000000;
-moz-box-shadow: 0px 0px 8px 0px #000000;
box-shadow: 0px 0px 8px 0px #000000;
background-color: rgba(0, 70, 12, 0.5);
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
}
また、ヘッダーがナビゲーション バーに干渉し続ける理由を誰かが知っている場合は、ご意見をお聞かせください。ナビゲーション バーに、Twitter のナビゲーション バーのように少し「勾配」を持たせたいと思っていましたが、使用したチュートリアルはそれに近づきましたが、ダイスはありませんでした。