【文字色を変更したい】スクロール時のグローバルメニュー(オーバーレイ(上部固定/スクロール時背景白))のカスタマイズ

0
いいねをした人: 居ません
  • このトピックには4件の返信、2人の参加者があり、最後にmegにより2日、 15時間前に更新されました。
5件の投稿を表示中 - 1 - 5件目 (全5件中)
  • 投稿者
    投稿
  • #109017
    meg
    参加者
    2

    【お使いの Snow Monkey のバージョン】 17.2.4
    【お使いの Snow Monkey Blocks のバージョン】16.0.3
    【お使いの Snow Monkey Editor のバージョン】 8.0.1
    【お使いのブラウザ】Chrome

     

    ### 実現したいこと

    スクロールをした際だけ、グローバルメニューの文字色を変更したい。

    =オーバーレイ(上部固定/スクロール時背景白)のメニューの文字色

     

    ### 発生している問題

    割り当てるCSSがわからず、思うようにできずにいます。

     

    ### 試したこと

    フォーラムを参考にしたり、デベロッパーツールでそれらしいクラスを調べて、いろいろと設定してみたのですが、色は変えられるものの「スクロール前」の色も同じ色に変わってしまいました。

     

    ・オーバーレイ(上部固定/スクロール時背景白)

    の際の文字色を変更するには、どのクラスを割り当てればよいのでしょうか。

    ※スクロール前は既定の色のままで問題ありません。

    上記の文字色を変更したいです。

    0
    いいねをした人: 居ません
    #109021
    Olein_jp
    参加者
    459

    検証ツールを開いて上部固定のメニューが出てくる瞬間の .l-header__drop-nav というCSSクラスがついている要素を確認してみてください。

    aria-hiddentruefalse で切り替わっていることが確認できるはずです。この部分をCSSで利用することで、上部固定メニューが出てきたときだけCSSを適応するという書き方をすることができます。

    例えば、

    .l-header__drop-nav[aria-hidden="false"] .p-global-nav .c-navbar__item>a {
        color: pink;
    }

    このように書くと、上部固定メニューの文字色だけがピンクになっていると思います。こちらをもとにカスタマイズしてみてください。

    0
    いいねをした人: 居ません
    #109024
    meg
    参加者
    2

    オレインさん、ありがとうございます。

    [aria-hidden="false"]
    

    を追加すれば、条件を分岐させることができるのですね。

    ただすみません。
    教わった方法では、意図するタイミングで文字色を変更することができませんでした。

    検証ツールを開いて上部固定のメニューが出てくる瞬間の .l-header__drop-nav というCSSクラスがついている要素を確認してみてください。>aria-hidden が true と false で切り替わっていることが確認できるはずです。

    こちら確認してみたのですが、「オーバーレイ(上部固定/スクロール時背景白)」の設定だと、教えていただいた箇所のクラスはfalseには切り替わらないようです。

    ヘッダーの設定が「オーバーレイ」または「ノーマル」に設定した場合は、反映されることは確認できました。

    できれば「オーバーレイ(上部固定/スクロール時背景白)」の見た目(左にロゴ、右にメニュー、スクロール時背景白)で設定できると嬉しいのですが…

    ちなみに下記がスクロール前で

    こちらがスクロール後です。

    いっそ、元のCSSファイルで上記の

    .l-header {
      background-color: var(--_background- 
      color,transparent);
      color: var(--header-text-color,#333);
      overflow: hidden;
      z-index: 1000;
    }

    color: var(--header-text-color,#333);
    

    の部分を書き換えてしまおうかとも思ったのですが、
    それでは根本的な解決にはならないですよね…。

    お手数ですが、もう少しお付き合いいただけると嬉しいです。

    0
    いいねをした人: 居ません
    #109029
    Olein_jp
    参加者
    459

    あ、すいません。

    「オーバーレイ(上部固定/スクロール時背景白)」ですね。その場合は、html 要素に data-scrolled という属性で切り替えているはずなので、そちらを用いでCSSを書いてみると良いかと思います。

    0
    いいねをした人: 居ません
    #109030
    meg
    参加者
    2

    オレインさん!
    ありがとうございます!!

    無事反映できました!!

    [data-scrolled=true] .l-header {
      color:#00A0E9;
    }
    0
    いいねをした人: 居ません
5件の投稿を表示中 - 1 - 5件目 (全5件中)
  • トピック「【文字色を変更したい】スクロール時のグローバルメニュー(オーバーレイ(上部固定/スクロール時背景白))のカスタマイズ」には新しい返信をつけることはできません。

ドキュメント

Snow Monkey の設定方法やマニュアルを掲載しています。

ドキュメント

フォーラム

Snow Monkey の使い方やカスタマイズについてのご質問・ご要望等はサポートフォーラムで行っています。サポートフォーラムは誰でも閲覧できますが、書き込みできるのは Snow Monkey 購入者のみとなります。

サポートフォーラム

よくあるご質問

Snow Monkey のサービスについて不明な点がある場合は、まずはよくあるご質問をご確認ください。

よくあるご質問

お問い合わせ

よくあるご質問を見ても解決しなかった場合、試用版の申請については問い合わせフォームからお願いいたします。

お問い合わせ