如何防止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矩形？

在此先感谢