cover image

スマホでの表示時にヘッダーのメニューをたたむようにしました

ヘッダーへリンクを設定している場合に、複数設定時にスマホなどの端末の幅が狭い端末の場合にロゴとかぶってしまう問題がありました。
そのため、スマホの場合にはハンバーガーメニューボタンを表示し、押下時にメニュー一覧を表示するように変更しました。
notion image
 

ヘッダーのボタンの色を変えたい場合

背景色などを設定している場合にボタンの色を変えたい場合にはこちらのCSSを追加してください。
.header__menuOpenBtn svg {
  fill: #fff; /* 任意の色コードを入れてください */
}
CSS
 

ボタンとメニューの表示幅を変更したい場合

通常では 640px をしきい値として表示非表示を変えています。表示する項目数によってそれを変えたい場合もあると思います。

640pxよりも大きい画面でハンバーガーメニューを表示したい場合

@media (max-width: 720px) { /* ここの数値を任意の値に設定してください */
  .header__menuOpenBtn {
    display: flex;
  }
  .header__btns {
    display: none;
  }
}
CSS

640pxよりも小さい画面でハンバーガーメニューを表示したい場合

@media (max-width: 640px) { /* 一旦既存のCSSをリセットします */
  .header__menuOpenBtn {
    display: none;
  }
  .header__btns {
    display: flex;
  }
}
@media (max-width: 480px) { /* ここの数値を任意の値に設定してください */
  .header__menuOpenBtn {
    display: flex;
  }
  .header__btns {
    display: none;
  }
}
CSS

ハンバーガーメニューに切り替えずに項目を表示したままにしたい

@media (max-width: 640px) { /* 既存のCSSをリセットします */
  .header__menuOpenBtn {
    display: none;
  }
  .header__btns {
    display: flex;
  }
}
CSS
 
以上です。
他にも「こんな感じでカスタマイズしたい!」などございましたらお気軽にお問い合わせください。
 
もし指定方法・カスタマイズ方法がよくわからない場合にはお気軽にDiscordやメール、TwitterDMなどでも可能ですので、運営にお問い合わせください!
こちらにお問い合わせ先を記載しています。
今後もAnotionをよろしくお願いします。