ホテル・結婚式場などのホームページがつくれるエレガントなデザインのテンプレート「CANON」

ワードプレステーマ別

TCDテーマSOLARIS:ヘッダーメニューを固定したい

WordPressテーマ「NULL」

TCD LABOはWordPressテーマ「NULL」を使用して作られています。

ダウンロード

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秒かかります。

▼ページ読み込み直後
変更箇所イメージ

この記事は役に立ちましたか?

もし参考になりましたら、下のボタンで教えてください。
今後の記事作成の参考とさせて頂きます!

同じテーマのカスタマイズ記事