[柳原完]

【お使いの Snow Monkey のバージョン】
【お使いの Snow Monkey Blocks のバージョン】
【お使いの Snow Monkey Editor のバージョン】
【お使いのブラウザ】
【当該サイトのURL】

### 実現したいこと

ヘッダーやハンバーメニューのサイズを大きくして、文字色を黒にしたいのでCSSを教えていただきたいです。

### 発生している問題

 

### 試したこと

♥ 0

Who liked: No user

[キタジマ タカシ]

デフォルトだとハンバーガーボタンは黒（color: inherit）になっていると思います。ヘッダーレイアウトをデフォルトから変更したり、ヘッダー周りを CSS でカスタマイズしたりしていますか？

♥ 0

Who liked: No user

[柳原完]

ヘッダーの文字色は黒から変更しております。ヘッダーの背景を透明にするCSSは追加しております。

ヘッダー以外のアクセントカラーは今のままが良いので、ヘッダーメニューとハンバーガーメニューのみ黒に変えて、大きさを大きくしたいです。

♥ 0

Who liked: No user

[キタジマ タカシ]

ひとまずハンバーガーボタンの色を変える CSS を書いてみました。

/* ヘッダー内のハンバーガーボタンの色を red に変更 */
.l-header .c-hamburger-btn {
  color: red;
}

.l-header .c-hamburger-btn__bar {
  background-color: red;
}

ヘッダーの文字色は黒から変更しております。ヘッダーの背景を透明にするCSSは追加しております。

ヘッダー以外のアクセントカラーは今のままが良いので、ヘッダーメニューとハンバーガーメニューのみ黒に変えて、大きさを大きくしたいです。

すみません、ちょっと実際にどういうヘッダーになっているのかが想像できないので具体的なアドバイスはできないのですが、基本的には、ヘッダー内のメインコンテンツはメニュー・ハンバーガーボタン（とロゴ）だと思うので、個人的には「ヘッダーの文字色」は黒のままで、変えたい部分だけ CSS で色を変えるほうがメンテナブルなのじゃないかなぁと思います。

♥ 0

Who liked: No user

[柳原完]

ありがとうございます。

ハンバーガーメニューの大きさを変えるCSSもいただけますか？？

♥ 0

Who liked: No user

[キタジマ タカシ]

一番簡単なのは zoom を使う方法ではないでしょうか。

.l-header .c-hamburger-btn {
  zoom: 2;
}

きっちり調整したいなら下記のように各要素に個別にスタイルを指定していく必要があります。

.l-header .c-hamburger-btn__bars {
    margin: 6px auto;
    height: 24px;
    width: 44px;
}

.l-header .c-hamburger-btn__bar:nth-of-type(2) {
    top: 11px;
}

.l-header .c-hamburger-btn__bar:nth-of-type(3) {
    top: 23px;
}

♥ 0

Who liked: No user

[投稿者]

投稿