cover image

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

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

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

背景色などを設定している場合にボタンの色を変えたい場合にはこちらのCSSを追加してください。
CSS
 

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

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

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

CSS

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

CSS

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

CSS
 
以上です。
他にも「こんな感じでカスタマイズしたい!」などございましたらお気軽にお問い合わせください。
 
もし指定方法・カスタマイズ方法がよくわからない場合にはお気軽にDiscordやメール、TwitterDMなどでも可能ですので、運営にお問い合わせください!
こちらにお問い合わせ先を記載しています。
今後もAnotionをよろしくお願いします。