タグ・CSS

ナビゲーションメニューを上部固定にしたい

CSSにて、ナビゲーションメニューを上部に固定することができます。
こちらは、サイト全体設定の「共通HEAD」での設定がオススメです。

※各マイテーマごとのCSS設定で使用する際は、下記のCSSから「<style>」と「</style>」を外してご利用ください

なお、使用しているナビゲーションメニューのタイプごとにCSSが異なります。
ご自身のサイトに合わせたCSSを選択してください。




オーバーレイタイプ

<style>
nav.navi_1 {
position: fixed;
}
.navi_1 {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 10;
overflow: visible;
}
.wrapper {
padding-top: 44px;
/* 数字を変えることでヘッダー画像の上部の余白を調整できます */
}
</style>




スライドタイプ

<style>
.nav_icon,
.navi_2 .nav_icon {
position: fixed;
}
</style>




プルダウンタイプ

※メニュー内のリンクの数が多い場合、画面からはみ出たリンクが押せなくなる可能性があります

<style>
nav.navi_3 {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 11;
}
.wrapper {
padding-top: 44px;
/* 数字を変えることでヘッダー画像の上部の余白を調整できます */
}
</style>

ヘルプを検索

キーワード
カテゴリー