Twenty Seventeen メニューバー高さと背景色を変更する

WordPress Twenty Seventeen
画面デザインに関するカスタマイズ
メニューバーの高さと背景色を変更する
 
 
Twenty Seventeen のヘッダー画像の色調に合わせて、メニューバーの背景色を変更するとともに、ナビゲーションメニューの高さがありすぎるので、高さを狭めるカスタマイズを行った。
 
スポンサー リンク
 
 
Twenty Seventeen の【 style.css 】。
 
メニューバーの高さと背景色を変更する
 
 
メニューバーの高さと背景色を変更する 例-1
 
style.css に下記ソースコードを追記する。
 
変更結果 例-1
メニューバーの高さと背景色を変更する
 
 
スマホ版 『メニュー』 の文字色の変更 例-1
 
上記だけの変更だと、スマホでのメニューの背景色が白の為、 メニューバーの文字が見えないことになる。そこで、スマホ版 の『メニュー』 の文字色も変更する必要がある。
 
style.css に下記ソースコードを追記する。
 
変更結果 例-1
メニューバーの高さと背景色を変更する
 
 
メニューバーの高さと背景色を変更する 例-2
 
style.css に下記ソースコードを追記する。
 
変更結果 例-2
メニューバーの高さと背景色を変更する
 
 
スマホ版 『メニュー』 の文字色の変更 例-2
 
style.css に下記ソースコードを追記する。
 
変更結果 例-2
メニューバーの高さと背景色を変更する
 

 

以上。
(2017.10.29)

 
             

スポンサー リンク
 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください