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를 삽입 할 수 있습니다. 적어도 위의 스 니펫은 부트 스트랩 코드가 아니지만 HTML이 깨끗하다는 것을 알았습니다.

도와 주시겠습니까? without css

추가 #mobileSelect {디스플레이 :

종류는 별도의 CSS없이 로버트

Answer 1

과 관련 없음; } : #mobileSelect { display: none; }

추가 ul {display : block! important; } : ul { display: block!important; }

거의 내가 원하는 것. 그러나 칙칙한 직사각형을 제거하는 방법은 무엇입니까?

미리 감사드립니다.