上部メニューを固定する際によく利用する「position:fixed」ですが、幅を指定して、「margin:0 auto;」にしても中央寄せが出来ません。
この解決方法と、ついでにページ内リンクのずれも解決します。
まずはデモページをご覧ください。
デモページを見る
CSSに「position:fixed」と合わせて「inset: 0;」と「margin: auto;」を記述します。
これで中央寄せになります。
HTML
<header>
<div class="inner">
<div class="logo"><a href="#">ロゴ</a></div>
<nav class="navi">
<ul>
<li><a href="#menu01">メニュー1</a></li>
<li><a href="#">メニュー2</a></li>
<li><a href="#">メニュー3</a></li>
<li><a href="#">メニュー4</a></li>
<li><a href="#">メニュー5</a></li>
</ul>
</nav>
</div>
</header>
<div class="inner">
<div class="logo"><a href="#">ロゴ</a></div>
<nav class="navi">
<ul>
<li><a href="#menu01">メニュー1</a></li>
<li><a href="#">メニュー2</a></li>
<li><a href="#">メニュー3</a></li>
<li><a href="#">メニュー4</a></li>
<li><a href="#">メニュー5</a></li>
</ul>
</nav>
</div>
</header>
<div class="wrap">
<div class="container">下へスクロールしてください。</div>
<div class="container" id="menu01">「メニュー1」のページ内リンク。</div>
</div>
CSS
header {
position: fixed;
width: 1000px;
inset: 0;
margin: auto;
z-index: 99;
}
.inner {
display: flex;
justify-content: space-between;
align-items: center;
height: 80px;
padding: 0px 30px;
background-color: #666;
}
.logo a {
color: #fff;
}
.navi ul {
display: flex;
}
.navi li {
margin: 0 20px;
}
.navi li a {
color: #fff;
}
.wrap {
width: 1000px;
margin: 300px auto;
}
.container {
height: 1000px;
font-size: 1.5rem;
text-align: center;
}
position: fixed;
width: 1000px;
inset: 0;
margin: auto;
z-index: 99;
}
.inner {
display: flex;
justify-content: space-between;
align-items: center;
height: 80px;
padding: 0px 30px;
background-color: #666;
}
.logo a {
color: #fff;
}
.navi ul {
display: flex;
}
.navi li {
margin: 0 20px;
}
.navi li a {
color: #fff;
}
.wrap {
width: 1000px;
margin: 300px auto;
}
.container {
height: 1000px;
font-size: 1.5rem;
text-align: center;
}
※幅や高さは仮の設定です。
「position:fixed」は、固定した分の高さが無くなるため、固定ヘッダーの後ろに内容が隠れてしまいます。
また、ページ内リンクの場合は意図した位置にピッタリ移動しない事があります。
その解決方法は色々ありますが、個人的には下記の2行で対応する事が多いです。
margin-top: -80px;
padding-top: 80px;
数値は、固定ヘッダーの高さと同じにしてください。
先ほどの「.container」にページ内リンクのずれ対策もまとめると下記になります。
CSS
.container {
height: 1000px;
font-size: 1.5rem;
text-align: center;
margin-top: -80px;
padding-top: 80px;
}
height: 1000px;
font-size: 1.5rem;
text-align: center;
margin-top: -80px;
padding-top: 80px;
}
デモページの「メニュー1」をクリックしてみてください。該当箇所にピッタリ移動します。
上記の記述が無いと、固定ヘッダーとテキストが重なってテキストが隠れてしまいます。
固定ヘッダーを使う場合は、利用してみてください。