bootstrap4で常にハンバーガーアイコンを表示させる。

システムの要件で常にハンバーガーメニュー(クリックメニュー、スマホ用メニュー)を表示させる必要があったので調整。
(最近のレスポンシブなサイトでよくある画面幅が小さいときにクリックするとメニュー表示されるアレです。)
まずはとりあえず圧縮されていないCSSを公式からダウンロード。
https://getbootstrap.com/docs/4.1/getting-started/download/

修正箇所は以上に多いので抜粋。

◆修正前のコード

@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}
@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}

◆修正後のコード

.container {
  max-width: 540px;
}

修正内容は単純で、画面サイズごとに定義しているCSS部分(@media (min-width: 576px))以外を
削除して常にハンバーガー表示させるようにするだけです。

ここの修正だけではなく、全箇所同じように修正する感じ。
widthとかは適当に調整してください。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする