Q.ヘッダーメニューを固定したいです。
SOLARISのヘッダーのグローバルメニューは、スクロールしたりマウスオーバーすると白いメニューバーが下りてくる仕組みですが、常に固定して表示させることはできますか。
▼現状
A.CSSのカスタマイズでそのように見せることは可能です。
オリジナルは、アニメーションをしながら徐々にスタイルが適用されていくのに対し、常にヘッダーの表示場所にスタイルが適用されるようにします。
また、白く反転している文字も初めから色付けしておきます。
カスタムCSS
body:not(.hide_global_menu) #header{ background-color: #ffffff; box-shadow:0 0 10px 0 rgba(0,0,0,0.15); } #global_menu ul li a, #header_search_button:before{ color: #000000; } #global_menu ul li ul li a, #global_menu ul li.current-menu-item ul li a{ color: #ffffff; } #global_menu ul li.current-menu-item a{ color: #00729f; /*現在のページを示す色です。「メインカラー」のカラーコードに合わせてください。*/ }
補足
オリジナルはアニメーションを多用している都合上、上記CSSでは初めからヘッダーメニューの背景色が表示される状態になります。
各要素がフェードインしてくるまで約1秒かかります。
▼ページ読み込み直後
この記事は役に立ちましたか?
もし参考になりましたら、下のボタンで教えてください。
今後の記事作成の参考とさせて頂きます!