Как сохранить малый стиль боковой панели при изменении размера экрана?

Question

Я хочу создать небольшую навигационную панель для мобильной первой веб-карты.

Я нашел фрагмент кода, который делает то, что я хочу, но когда страница сводится к определенной ширине, навигация в навигаторе вверху, то я теряю эффект, который я хочу создать, с маленькими скользящими значками. Я пытаюсь изменить минимальную ширину в запросе, который он изменил. Пожалуйста, предложите подход JQuery, мне нравится этот простой метод html и css.

Это ссылка на Bootsnipp, я работаю над: http://bootsnipp.com/user/snippets/pjyo4

<div class="container-fluid"> 

    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-sidebar-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> 

    <div class="collapse navbar-collapse" id="bs-sidebar-navbar-collapse-1"> 
     <ul class="nav navbar-nav"> 
       <li class="active"> 
        <a href="#">Acceuil<span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-home"></span></a> 
       </li> 

       <li class="dropdown"> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Utilisateur<span class="caret"></span> 
        <span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-user"></span> 
        </a> 

       <ul class="dropdown-menu forAnimate" role="menu"> 
        <li><a href="{{URL::to('createusuario')}}">Créer</a></li> 
        <li><a href="#">Modifier</a></li> 
        <li><a href="#">Reporter</a></li> 
        <li class="divider"></li> 
        <li><a href="#">Lien séparé</a></li> 
        <li class="divider"></li> 
        <li><a href="#">Information</a></li>  
       </ul> 
       </li>   

      <li > 
       <a href="#">Référence<span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-th-list"></span></a> 
      </li>   
      <li > 
       <a href="#">Tags<span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-tags"></span></a> 
      </li> 
     </ul> 
    </div> 

и это мой CSS3:

body,html{ 
height: 100%; 
} 

nav.sidebar, .main{ 
-webkit-transition: margin 200ms ease-out; 
    -moz-transition: margin 200ms ease-out; 
    -o-transition: margin 200ms ease-out; 
    transition: margin 200ms ease-out; 
} 

.main{ 
padding: 10px 10px 0 10px; 
} 

@media (min-width: 765px) { 

.main{ 
    position: absolute; 
    width: calc(100% - 40px); 
    margin-left: 40px; 
    float: right; 
} 

nav.sidebar:hover + .main{ 
    margin-left: 200px; 
} 

nav.sidebar.navbar.sidebar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand { 
    margin-left: 0px; 
} 

nav.sidebar .navbar-brand, nav.sidebar .navbar-header{ 
    text-align: center; 
    width: 100%; 
    margin-left: 0px; 
} 

nav.sidebar a{ 
    padding-right: 13px; 
} 

nav.sidebar .navbar-nav > li:first-child{ 
    border-top: 1px #e5e5e5 solid; 
} 

nav.sidebar .navbar-nav > li{ 
    border-bottom: 1px #e5e5e5 solid; 
} 

nav.sidebar .navbar-nav .open .dropdown-menu { 
    position: static; 
    float: none; 
    width: auto; 
    margin-top: 0; 
    background-color: transparent; 
    border: 0; 
    -webkit-box-shadow: none; 
    box-shadow: none; 
} 

nav.sidebar .navbar-collapse, nav.sidebar .container-fluid{ 
    padding: 0 0px 0 0px; 
} 

.navbar-inverse .navbar-nav .open .dropdown-menu>li>a { 
    color: #777; 
} 

nav.sidebar{ 
    width: 200px; 
    height: 200px; 
    margin-left: -160px; 
    float: left; 
    margin-bottom: 0px; 
} 

nav.sidebar li { 
    width: 100%; 
} 

nav.sidebar:hover{ 
    margin-left: 0px; 
} 

.forAnimate{ 
    opacity: 0; 
} 
} 

@media (min-width: 1330px) { 

.main{ 
    width: calc(100% - 200px); 
    margin-left: 200px; 
} 

nav.sidebar{ 
    margin-left: 0px; 
    float: left; 
} 

nav.sidebar .forAnimate{ 
    opacity: 1; 
} 
} 

nav.sidebar .navbar-nav .open .dropdown-menu>li>a:hover, nav.sidebar 
.navbar-nav .open .dropdown-menu>li>a:focus { 
    color: #CCC; 
background-color: transparent; 
} 

nav:hover .forAnimate{ 
opacity: 1; 
} 
section{ 
padding-left: 15px; 
} 

Моя цель для сохранения стиля боковой панели с маленькими значками, которые показывают, когда мышь над боковой панелью.

Answer 1

Если я правильно понял, вы хотите, чтобы меню оставалось на левой стороне все время и не переключается на раскрывающееся меню в верхней части экрана. Если удалить часть, которая отображает выпадающее меню:

<div class="container-fluid">  

    <div class="navbar-header">  
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-sidebar-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> 

и дополнительно к тому, что mediaquery в CSS:

@media (min-width: 765px) {  

который ограничивает CSS на экране шириной больше, чем 765px.

Теперь у вас есть меню все время с левой стороны. Единственная проблема в том, что глификоны и буквы скрыты ... и я действительно не знаю почему. К сожалению, я не очень хорошо знаком с бутстрапом .. но я надеюсь, что, может быть, я мог бы немного помочь вам.