Отзывчивое меню всегда видно на мобильных устройствах

Question

Я разработал меню для крупных устройств и мобильных устройств, но проблема в меню переключения всегда отображается в расширенном виде. Проблема возникла, когда заданы col-md-3 & col-md-9.

Есть ли способ исправить это?

Моего HTML код

<div class="container"> 
    <div class="row"> 
     <div class="col-md-3"><img class="img-responsive logo" src="images/logo.png" ></div> 
     <div class="col-md-9"> 
     <nav class="navbar navbar-default" style="background:none; border:none;"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       </button> 
      </div> 
      <div class="collapse navbar-collapse visible-xs" id="bs-example-navbar-collapse-1"> 
       <ul class="nav navbar-nav navbar-right text-center"> 
        <li><a href="#">Home</a></li> 
        <li><a href="#">About us</a></li> 
        <li><a href="#">Employers</a></li> 
        <li><a href="#">Job Seekers</a></li> 
        <li><a href="#">Testimonials</a></li> 
        <li><a href="#">Contact us</a></li> 
       </ul> 
      </div> 
     </nav> 
     </div> 
    </div> 
</div> 

Answer 1

Теперь Посмотрите на этих https://jsfiddle.net/MadhawaMB/qhft4w1L/1/

изменений Im код
тумблера получить сгруппированный для лучшего мобильного дисплея

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 

---

<div class="container"> 
    <div class="row"> 
     <div class="col-md-3"><img class="img-responsive logo" src="images/logo.png" ></div> 
     <div class="col-md-9"> 

<nav class="navbar navbar-default" role="navigation" style="background:none; border:none;"> 
    <div class="container-fluid"> 
    <!-- toggle get grouped for better mobile display --> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 



    <!-- Collect the nav links, forms, and other content for toggling --> 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
     <ul class="nav navbar-nav"> 
     <ul class="nav navbar-nav navbar-right text-center"> 
        <li><a href="#">Home</a></li> 
        <li><a href="#">About us</a></li> 
        <li><a href="#">Employers</a></li> 
        <li><a href="#">Job Seekers</a></li> 
        <li><a href="#">Testimonials</a></li> 
        <li><a href="#">Contact us</a></li> 
       </ul> 
     </ul> 



    </div><!-- /.navbar-collapse --> 
    </div><!-- /.container-fluid --> 
</nav></div> 
    </div> 
</div>