日別アーカイブ: 2013年3月18日

Twenty Elevenの子テーマでグローバルメニューの調整

kanedaさんより以下の質問がありました。

Twenty Elevenの子テーマで、グローバルメニューのリンクが、意図しない箇所で改行されてしまうのを直したい!
ウィンドウが広いときには以下の様だったのが、
twenty-eleven-menu
iPhoneなどの狭いウィンドウで、こうなる(ONLINE SHOPというメニューが改行してしまう)。
twenty-eleven-menu-item-line-brake
kaneda#8kaneda

と、いうことで、調べてみました。
結論を言うと、右上にある検索フォームのcssが原因です。子テーマのstyle.cssに以下を追加しましょう。
@media queryにする必要はありません。

これで以下のようになります。
twenty-eleven-menu-item-line-brake-fixed

さらに、クリックできるエリアを広げる為に、各リンクを横幅いっぱいに広げたければ、以下を追加します。今度は@media queryで狭くなった時だけ、そうなるように条件を指定します。

こんな感じになるはずです。
twenty-eleven-menu-item-line-brake-fixed-wide