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

ヘッダーバーを固定して透過

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

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

MEMO
「SANGO」は、幅768pxより小さなデバイスでは、ヘッダーバーが非表示になります。

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

編集するファイル

子テーマ内のstyle.css(スタイルシート)に追記していきます。

/*こちらはSANGOの子テーマ用CSSです。以下にCSSを記入していきましょう。*/

とある下に追記してください。

既に、追記されてる部分があれば、その下に。

sango-theme-child
├functions.php
style.css

style.cssへ追記

注意
※11月9日、少しばかり、訂正しています。
style.css

#logo img{
height:180px;/*⑤ロゴの高さ(お好みで)*/
margin:60px 0 0;/*④バーの高さ分上部にマージンを追加*/ 
}
.header{
position:fixed;/*①バーを固定*/
width:100%;/*②fixedにすると幅がなくなるので指定*/
background-color:#58a9efb8 !important;/*③バーの色を透過*/ 
}

もし、ロゴをヘッダーのバー下で真ん中寄せにを行っている場合は、こうなります。

赤文字部分はロゴをヘッダーのバー下で真ん中寄せにで設定済み。

logoをバー下で真ん中寄せロゴをヘッダーのバー下で真ん中寄せに
style.css
#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;を指定すると親要素の左上が基準になるのでバーの下に一部隠れてしまいます。なので、バーの高さ分程、マージンを取ります。

参考 ★スタイルシートリファレンス:positionHTML・CSSの早見表サイト

結果

ヘッダーバーを固定して透過

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

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

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

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

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

コメントを残す

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