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

Twenty Elevenの子テーマでグローバルメニューの調整」への1件のフィードバック

  1. kanedakaneda

    タカハシ先生ありがとうござます!
    子テーマのstyle.cssに追加しました。

    先生の表示は、(画像)ナビゲーションがセンターになっていたので
    (実際は左より)
    #access li に text-align:center;
    を追加したら、センターになりました。

    #access li {
    float:none;
      text-align:center;
    }
    どっちが良いですかね???
    好みの問題でしょうか?
    でも、、、、、表示がきちんとできて、すっきりしました。
    ありがとうございます(^_^)

    返信

kaneda へ返信する コメントをキャンセル

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


This site uses Akismet to reduce spam. Learn how your comment data is processed.