【ヘッダーの文字色を白色に変更する】テンプレート・セミオーダーのホームページ制作における小技

WPテーマ機能紹介 cssヘッダー投稿日:2022.10.21 / 更新日:2023.03.15

用意されているヘッダーの文字色を白色にする方法
※サイト全体をダーク系の色合いの時に使用できます。

1. ヘッダーの文字色を白色にする

下記 css コードをご利用ください。

header.gnav-fix {
  background: rgba(0, 0, 0, 0.7) !important;
}

header .gnav-list ul .menu-item .gnav-link {
  color: #fff;
}

header .gnav-list ul .menu-item .gnav-link .txt-en {
  color: #fff;
}

heade .gnav-list.gnav-list-open {
  color: #333;
}

header .gnav-list.gnav-list-open ul .menu-item .gnav-link {
  color: #333;
}

header .gnav-list.gnav-list-open .wp-block-button .wp-block-button__link {
  background: #333 !important;
  color: #fff;
}

header .gnav-toggle span {
  background: #fff;
}

header .gnav-toggle.gnav-open span:first-child,
header .gnav-toggle.gnav-open span:nth-of-type(3) {
  background-color: #333;
}

header .wp-block-button .wp-block-button__link {
  background: #fff !important;
  color: #333;
}