はてなブログテーマ「Brooklyn」のグローバルナビが切れてしまうのをいい感じにする

僕ははてなブログのテーマに「Brooklyn」を使用しています。
shiromatakumi.hatenablog.com

読みやすく、シンプルなのに古臭くなく今風ぽい感じで人気テーマになるのも納得だなあと思うわけです。

しかしカスタマイズでグローバルナビを設置することが可能なのですが、ある画面幅でグローバルナビが途切れてしまうのです。
人気テーマということもあり、はてなブログを巡回していると高頻度で遭遇するわけです。ほかのブログを見ていて途切れてしまっているのを見るとすごく気になるので記事にした次第です。

せっかちな人向け

下記をデザインカスタマイズの「デザインCSS」の部分に貼り付けていただければいい感じになります。

@media (max-width: 1150px) and (min-width: 920px){
   .global-menu-list {
      width: 100%;
   }
}

スポンサーリンク

発生事象

以下キャプチャの赤枠で囲んだ部分です。

(Brooklynサンプルエントリーより引用）

作者様が用意してくださっているサンプルエントリーなどを開いていただき、ブラウザの幅を変えてみていただけるとわかると思います。
brooklyn.hatenablog.jp

途切れるブラウザ幅の条件

とぎれてしまうのはブラウザ幅が920pxから1150pxまでの時のみのようです。
特にどういう場合に起きるかというと、フルHD(1920×1080)のモニタでウィンドウを左右に半分ずつ表示した場合に起きるわけです。逆にスマートフォンやノートPCで多い解像度（1366×768）での全画面表示では発生しませんね。

途切れてしまう理由

レスポンシブなテーマになっているのでglobal-menu-listのwidthを画面の横幅に応じて変化させているわけですが、920pxから1150pxの場合は横幅が1020px固定になっています。そのため、920pxで表示した場合は100pxがはみ出て表示されてしまいます。
というより書いていて気がついたのですが、コンテンツのほうも切れていますね。さすがにコンテンツのほうはレスポンシブデザイン全体の修正が必要なので、修正はカスタムCSSでやるのは大変ですね。（たぶん作者の方も認識はしているがあまりに多くの方に使われているので影響を考慮して現状のままとしている？またはそういうデザイン？）

おわりに

ドロップダウン版グローバルナビもあるみたいですがこちらは未検証です。
shiromatakumi.hatenablog.com