「SANGO」のヘッダーバーにはメニューが表示されるので
大画面表示では、ヘッダーバーを固定してスクロールしても常にトップに表示させるようにするカスタマイズです。
今回のカスタマイズはスタイルシートの編集だけですので、比較的簡単かな。
Contents
編集するファイル
子テーマ内のstyle.css(スタイルシート)に追記していきます。
/*こちらはSANGOの子テーマ用CSSです。以下にCSSを記入していきましょう。*/
とある下に追記してください。
既に、追記されてる部分があれば、その下に。
sango-theme-child
├functions.php
└style.css
style.cssへ追記
#logo img{
height:180px;/*⑤ロゴの高さ(お好みで)*/
margin:60px 0 0;/*④バーの高さ分上部にマージンを追加*/
}
.header{
position:fixed;/*①バーを固定*/
width:100%;/*②fixedにすると幅がなくなるので指定*/
background-color:#58a9efb8 !important;/*③バーの色を透過*/
}
もし、ロゴをヘッダーのバー下で真ん中寄せにを行っている場合は、こうなります。
赤文字部分はロゴをヘッダーのバー下で真ん中寄せにで設定済み。

#logo-wrapper{
text-align:center;/*ロゴを真ん中寄せ*/
height:240px;/*ロゴ部分の高さ(↓のロゴの高さと同じでOK)*/
background-color:#ffffff;/*ロゴ表示部分の背景色*/
}
#logo img{
height:180px;/*ロゴの高さ(お好みで)*/
margin:60px 0 0;/*④バーの高さ分上部にマージンを追加*/
}
.header{
position:fixed;/*①バーを固定*/
width:100%;/*②fixedにすると幅がなくなるので指定*/
background-color:#58a9efb8 !important;/*③バーの色を透過*/
}
①バーを上部で固定します。
②position:fixed;を指定するとなぜか幅がなくなっちゃうんですよね、なので指定。
③バーの色を指定すると同時に透過。(rgbaでも指定できますex:background-color:rgba(88,169,239,0.7);)
④position:fixed;を指定すると親要素の左上が基準になるのでバーの下に一部隠れてしまいます。なので、バーの高さ分程、マージンを取ります。
結果
スクロールしても常に上部に固定されます。
色や透過の具合は適宜調整してくださいませ。
透過すると、メニューの文字が読みにくくなる場合は、文字色も要調整。
今のところ、このサイトでは色はデフォルトのままにしてますが、今後変更するかもしれません。
個人的には、クールなイメージが好きなのでね♪
コメントを残す