「SANGO」のヘッダーバーをページ上部に固定した上で透過させる※訂正あり

「SANGO」のヘッダーバーにはメニューが表示されるので

大画面表示では、ヘッダーバーを固定してスクロールしても常にトップに表示させるようにするカスタマイズです。

今回のカスタマイズはスタイルシートの編集だけですので、比較的簡単かな。

編集するファイル

子テーマ内の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；を指定すると親要素の左上が基準になるのでバーの下に一部隠れてしまいます。なので、バーの高さ分程、マージンを取ります。

結果

スクロールしても常に上部に固定されます。

色や透過の具合は適宜調整してくださいませ。

透過すると、メニューの文字が読みにくくなる場合は、文字色も要調整。

今のところ、このサイトでは色はデフォルトのままにしてますが、今後変更するかもしれません。

個人的には、クールなイメージが好きなのでね♪