wordpressナビゲーションの固定をしたい

質問

wordpressテンプレートtwentytwelveを使用しています。
このナビゲーションメニュー（main-navigation）を、リキッドデザインではなく、ブラウザサイズを縮小しても、メニューボタンを縦に改行しないように固定にしたいのですが、方法がわかりません。

いろいろと方法を試したのですが、解決の糸口がつかめません。

どなたかお分かりになる方いらっしゃいますでしょうか？

-----------------------------------------------
/* Assistive text */
.assistive-text,
.site .screen-reader-text {
position: absolute !important;
clip: rect(1px, 1px, 1px, 1px);
}
.main-navigation .assistive-text:focus {
background: #fff;
border: 2px solid #333;
border-radius: 3px;
clip: auto !important;
color: #000;
display: block;
font-size: 12px;
padding: 12px;
position: absolute;
top: 5px;
left: 5px;
z-index: 100000; /* Above WP toolbar */
}

/* Navigation Menu */
.main-navigation {
margin-top: 24px;
margin-top: 1.714285714rem;
text-align: center;
}
.main-navigation li {
margin-top: 24px;
margin-top: 1.714285714rem;
font-size: 12px;
font-size: 0.857142857rem;
line-height: 1.42857143;
}
.main-navigation a {
color: #5e5e5e;
}
.main-navigation a:hover {
color: #21759b;
}
.main-navigation ul.nav-menu,
.main-navigation div.nav-menu > ul {
display: none;
}
.main-navigation ul.nav-menu.toggled-on,
.menu-toggle {
display: inline-block;
}

回答No.1

ORUKA1951 · ベストアンサー

その部分のHTML(DOM)が分からないと・・
　特に、HTMLが文書構造ではなく、このようにプレゼンテーション(デザイン)目的に書かれているとなおさらです。

・改行させたくなければ、display:inline-block;＋white-space:nowrap;、又は縫合ブロック幅を固定する。
・ディスプレイ幅が狭くなると折り返して表示させるほうが横スクロールをしなくてすむので、ユーザーインターフェースを考慮すると良いはずですが？？
・折り返したくないときはリキッドを使ってブロック幅が全体の幅に合わせて縮小させるのがセオリーですが？

clip: auto !important;　なぜ!important?詳細度が0030なので要らないと思うけど?
　　・・・基点となるセレクタが書かれていないので分からないけど

お礼

display:inline-block;＋white-space:nowrap
で、思い通りの動作をさせることができました。

初心者でよくわかっていなかったので、勉強しなおします。

ありがとうございました。

助かりました。