カスタマイズ＞デザイン＞ヘッダー　の中に『ヘッダーサブナビゲーションの色』も加えてほしい

♥ 0

いいねをした人: 居ません

このトピックには4件の返信、2人の参加者があり、最後にfourgetにより3年、 10ヶ月前に更新されました。

5件の投稿を表示中 - 1 - 5件目 (全5件中)

投稿者

投稿
2021年1月5日 4:55 PM #64842

fourget
閲覧者

♥ 2

PCヘッダー位置を「オーバーレイ（上部固定/スクロール時背景白）」に変えた際

同ページにあるヘッダーの文字色を白にしてもCSSの色指定が

[date-scrollede=”false”]（snow-monkey>src>css>layout>_header.scssの１２５行目）

に設置しているため

スクロールしたときに[date-scrollede=”true”]でカラー設定が無くなりデフォルトに戻るという認識なのですが

これを『ヘッダーサブナビゲーションできないか』という要望です。

追加CSSで色を変えることはできるのですが、ヘッダーサブの色を指定している場所が

snow-monkey>src>css>object>component>_sub-nab.scss

でデフォルトで『gray(#999)』になっているのは確認したのですが、そこから先どうカスタマイズすればいいのかわからなかったので・・・

それでは検討のほどよろしくお願いいたします。

♥ 0

いいねをした人: 居ません

2021年1月6日 3:33 PM #64896
キタジマタカシ
参加者

♥ 2421
「ヘッダーの文字色」をヘッダーサブナビゲーションにも反映したいということでしょうか？それとも単純にヘッダーサブナビゲーションの色を変えたいということでしょうか？

単純に色を変えるのは下記の CSS でできますが、そういうことではなく…？
```
.p-header-sub-nav .c-navbar__item a {
  color: red;
}
```
♥ 0

いいねをした人: 居ません
2021年1月6日 9:18 PM #64920
fourget
閲覧者

♥ 2
返信ありがとうございます。

言葉足らずで申し訳ありませんでした。

『ヘッダーサブナビゲーションの色もカスタマイズ＞デザイン＞ヘッダー』で変更できるようにして、そこで変更した色を
```
[data-scrolled=false] .l-header--sticky-overlay-colored-lg {
  color: var(--overlay-header-text-color,#fff);
}
```
と同じ場所に格納してほしい、という要望でした。

以下背景です。

背景画像が暗いためCSSで文字色を白に変えているのですが「オーバーレイ（上部固定/スクロール時背景白）」をつかうと背景色と色が同じなため見えなくなってしまいまして

現在メインのヘッダーでは
```
.l-header{
  color:black;
}
```
で、地の文字色を黒に設定しておいて、カスタマイズ＞デザイン＞ヘッダー　で文字色を白に設定しておけば

スクロールしてないときは
```
[data-scrolled=false] .l-header--sticky-overlay-colored-lg {
  color: var(--overlay-header-text-color,#fff);
}
```
これが.l-headerで設定した黒を打ち消して文字色を白に上書きしているのを確認しました。

これをスクロールしたときにdata-scrolledが発火して
```
[data-scrolled=true] .l-header--sticky-overlay-colored-lg {
  background-color: #fff;
  background-color: var(--_background-color,transparent);
}
```
となり、『カスタマイズで変更したcolor設定が無くなり、ヘッダーの背景が白になると同時に文字色が.l-headerで設定した黒に戻る』ことでメインヘッダーの色問題は解決したのですが

.p-header-sub-nav .c-navbar__item a　で変更した色も上記のようにスクロールすることで色を変化させることは可能なのでしょうか？

重ね重ね言葉足らずで申し訳ございませんでした。

♥ 0

いいねをした人: 居ません
2021年1月9日 1:31 PM #65068
キタジマタカシ
参加者

♥ 2421
なるほどです。
Snow Monkey のカスタマイザーでは色の設定は最低限の箇所しかできるようになっていません。やりだすときりがないからですが、たしかにヘッダーサブナビゲーションは色が固定されていて、状況によって見えなくなってしまうということがありえると思いますので、「ヘッダーサブナビゲーションの色」という設定項目を追加するのではなく、「ヘッダーの文字色」で設定した色がヘッダーサブナビゲーションにも反映されるようにするとどうかなと思いました。

もし個別に設定されたいのであれば、のような感じでスクロールしていないときに色を指定、スクロールしたときはもとの色、となるような CSS を書く感じになるかなと思います。
```
[data-scrolled="false"] .p-header-sub-nav .c-navbar__item a {
  color: #fff;
}
```
♥ 3

いいねをした人:
2021年1月9日 8:45 PM #65093

fourget
閲覧者

♥ 2

お忙しい中、返信ありがとうございます。

教えてくださった方法をためしてみます。

SCSSだけでJSのような動きを再現できるとは知らなかったもので・・・

深堀すればするほどすごく面白く、勉強になるテーマに出会えて本当に良かったです！

それではトピックを閉じさせていただきますね。

ご対応ありがとうございました。

♥ 1

いいねをした人: 居ません
投稿者

投稿