如何防止HTML-navbar在移動設備上崩潰？

Question

請幫幫我。我使用的Squarespace CMS（有點像Wordpress），它會丟棄此代碼：

<div id="navBlock" role="navigation">      
    <nav class="main-nav" data-content-field="navigation"> 
     <ul> 
      <li class="page-collection"> 
      <a href="/palindrom-1/">palindrom</a> 
      </li> 
      <li class="blog-collection active-link"> 
       <a href="/">Blog</a> 
      </li> 
      <li class="page-collection"> 
       <a href="/about/">About</a> 
      </li> 
     </ul> 

     <select id="mobileSelect" name="mobileSelect"> 
      <option class="mobile-select-label" value="">Navigation</option> 
      <option class="page-collection" value="/palindrom-1/">palindrom</option> 
      <option class="blog-collection" value="/" selected="selected">Blog</option> 
      <option class="page-collection" value="/about/">About</option> 
     </select> 
    </nav> 
</div> 

這很酷，它的工作原理。但我非常希望確保此導航欄不會在移動設備上摺疊（橫向< 640px）。如何用額外的CSS或JavaScript實現這一目標？我無法更改上面的代碼，因爲它是由CMS創建的。我只能注入額外的HTML，CSS或JS。至少我發現上面的代碼片段不是Bootstrap代碼，而是乾淨的HTML代碼。

你能幫我嗎？

親切的問候 羅伯特

Answer 1

而無需額外的CSS： without css

有了額外#mobileSelect {顯示：無; }： #mobileSelect { display: none; }

有了額外的UL {顯示：塊重要; }： ul { display: block!important; }

那是幾乎什麼我的魔杖。但如何刪除icky矩形？

在此先感謝