<!--ここからナビゲーション--> <div class="nav-wrapper"> <div class="menu"> <nav> <ul> <li><a href="#header">Top</a></li> <li><a href="#system_contents">System</a></li> <li><a href="#staff_contents">Staff</a></li> <li><a href="#access_contents">Access</a></li> <li><a href="#recruit_contents">Recruit</a></li> </ul> </nav> </div> </div> <!--ここまでナビゲーション--> CSS↓ /*ここからナビゲーション*/ .nav-wrapper { /* .navの高さ分確保用 */ height: 40px;} .menu{ width: 980px; margin: 0 auto; } .menu .is-fixed { position: fixed;} .menu::after{//フロート解除用クリアフィックス content: ""; clear: both; display: block; } .menu li { font-size: 15px; font-weight: bold; width: 196px; display:block; line-height:40px; height:40px; text-align:center; float: left; } .menu a{ display:block; line-height:40px; height:40px; text-align:center; text-decoration: none; background: linear-gradient( 180deg, rgb(252, 200, 98) ,rgb(226, 162, 67) , rgb( 255, 255, 255) ,rgb(226, 162, 67),rgb(252, 200, 98) ); color:#000; }
ヘッダーの下のナビの追従cssのis-fixedを適用したら
うまく適用できずブラウザに反映されませんでした。
調べてみたのですが、原因が分かりません。
ご教授いただけますでしょうか?
(質問文は編集できます)質問文のコードはそれぞれコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
修正いたしました。
どのように反映されないのでしょうか?求めるカタチと現状を記述されると良いかと思います。
is-fixedはなんらかのプラグインで付与されるのでしょうか。プラグイン/ライブラリは公式配布サイトのURLを質問文に追記ください。(URLにはリンクを張ることができます)また、ライブラリ呼び出し部分のコードと検証されている端末の種類(OS/ブラウザ)も提示されてはいかがでしょうか。
スクロールしたときにナビゲーションバーが追従するようにしたいのですが、現時点ではスクロールしても追従されません。
OSはWindows10、ブラウザはchromeです。
プラグインは使用しておりません。
位置の指定が無いので入れてみてはどうですか?
ではis-fixedをどうやって付与しているのでしょうか。その部分を提示してください。
任意の位置に来た時に固定であれば「css position sticky」で検索してみてください。
承知しました。
回答1件
あなたの回答
tips
プレビュー