サイドバーのハンバーガーアイコンが表示されない

[RHEE (SANG HYUN RHEE)]

サイドバー機能をセットアップしたばかりですが、ハンバーガーアイコンが表示されません。次のようになります。

しかし、ボックスにマウスを重ねると、アイコンが表示されます。

カーソルをボックスに置いていないときでもアイコンを表示するにはどうすればよいですか？

[Don]

こんにちは。

--header_primary-low-mid（デフォルトのヘッダーボタン）の色変数が、--header_primary（ヘッダー）の色（#fff）と同じ色になっているようです。そのため、サイドバーのアイコンが表示されません。サイトを拝見したところ、他のヘッダーアイコンには--tertiaryの色変数を使用されているようです。サイドバーボタンの色を変更することも可能です。または、header_primary-low-midの色を変更して表示させることもできます。

新しいテーマコンポーネントを作成するか、既存のコンポーネントに以下を追加してください。

Desktop > CSS

.header-sidebar-toggle {
  button {
    .d-icon {
      color: var(--tertiary);
    }
  }
}

[RHEE (SANG HYUN RHEE)]

迅速な返信ありがとうございます！\nしかし、おっしゃっている適切な変数が見つかりません。\n

\nどれのことでしょうか？

[Don]

さて、これらのいずれもヘッダーボタンの色を制御できないようです。これはカスタムテーマであり、色を変更できます。リモートテーマである可能性が高いため、おそらく色変数 color を変更することはできませんが、/admin/customize/colors (管理者 > カスタマイズ > 色) ページで確認できます。そのページで、使用しているカラーパレットを選択し、header_primary-low-mid 変数を検索してください。変更できない場合は、テーマ作成者に連絡する必要があります。

または

サイドバーボタンの色を変更する新しいテーマコンポーネントを追加することもできます。

1. /admin/customize/themes/ に移動します。
   カスタマイズ → テーマ
2. コンポーネントタブをクリックし、次に インストール ボタンをクリックします。
3. ポップアップウィンドウで + 新規作成 タブをクリックし、新しいコンポーネント名を入力します。

4. 作成 ボタンをクリックします。
5. コンポーネントが作成されました。次に、それを有効にしたいテーマを選択します。
   
   
6. CSS/HTMLの編集 ボタンをクリックします。
   
   
7. デスクトップタブをクリックし、以下のコードをCSSセクションに貼り付けます。

.header-sidebar-toggle {
  button {
    .d-icon {
      color: var(--tertiary);
    }
  }
}

8. 保存 ボタンをクリックします。完了です

[RHEE (SANG HYUN RHEE)]

素晴らしい、ご協力ありがとうございました。問題が完全に解決しました =]