メインサイトでスマホ対応した

メインサイトのメニューバーの項目が多くなってきて、 スマホからサイトを見ると表示が崩れてしまうのが問題になっていた。

この問題を解決するためにハンバーガーメニューを導入しようと考えたが、 既存の構造を弄らないといけなくて意外と厄介だなあと思って足踏みしていた。

悩みながら試行錯誤で css を編集していたら、 ハンバーガーメニューを導入しなくても下記の追加のみで良い感じに表示されることに気づいた。

@media screen and (max-width:768px) {
    .nav-bar {
        flex-flow: column;
    }
}

ハンバーガーメニューだとわざわざクリックしないと項目が見えないというデメリットもあるしこれでいこうと思う。

日記の一覧に戻る