【Rails】ヘッダーのドロップダウンをレスポンシブ対応

はじめに

こちらの記事で、ヘッダーをレスポンシブ対応するため、overflow-x: autoを実装した。
それにより表示領域から溢れた時はスクロールバーが表示されるようになった。

しかし、それによってドロップダウンの表示もスクロールバーが表示されるようになってしまった。

そこで、スクロールバーに対応するoverflow-xの適応を、ウィンドウサイズの横幅が750px以下の時にのみにすることにした。理由としては下記となる。
・約770px以下からbootstrapによってヘッダーの表示フォーマットが変わる
・それ以下の750px以下であれば、overflowを設定してもドロップダウンがスクロールバー表示にならない

環境

No	項目	内容
1	OS	Mac
2	Ruby	2.6.3
3	rails	6.0.4
4	bootstrap-sass	3.4.1
5	sass-rails	5.1.0

実装

こちらの記事を参考に実装する。

htmlのheadタグにviewportを追加する

layouts/application.html.erb

<%# width=device-widthにてブラウザの大きさをデバイスに合わせる。initial-scaleは画面の拡大率 %>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

cssファイルに適用したいスタイルを書く

　今回は、750px以下でoverflowの設定を適用することにする。

custom.scss

  // 画面サイズが750px以下の場合
@media (max-width: 750px) {
  .navbar-right {
    overflow-x: auto;
  }
}

おわりに

これで、750px以上では特にレスポンシブ対応せず、750px以上でスクロールバーを表示させることで、ドロップダウンのスクロールバー表示を防いだ。
今回bootstrapとの共存させているため、複雑になってしまったが、もっとシンプルな方法もあるかと思う。