折り畳みのためにnavbarを防ぐ

Question

私のウェブサイト用のサイドナビゲーションバーを設計しています。中程度の画面サイズまでは動作しますが、画面サイズが小さくなると（< 768px）そのすべてが乱雑になります。ここ は私のHTMLとCSSのコードは、誰かが何らかの解決策を提案することができます

.main .row { 
 
    padding: 0px; 
 
    margin: 0px; 
 
} 
 
/*Remove rounded coners*/ 
 

 
nav.sidebar.navbar { 
 
    border-radius: 0px; 
 
} 
 
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; 
 
} 
 
/* .....NavBar: Icon only with coloring/layout.....*/ 
 

 
/*Allow main to be next to Nav*/ 
 

 
.main { 
 
    position: absolute; 
 
    width: 100%; 
 
    margin-left: 40px; 
 
    float: right; 
 
} 
 
/*lets nav bar to be showed on mouseover*/ 
 

 
nav.sidebar:hover + .main { 
 
    margin-left: 200px; 
 
} 
 
/*Center Brand*/ 
 

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

 
nav.sidebar .navbar-brand, 
 
nav.sidebar .navbar-header { 
 
    text-align: center; 
 
    width: auto; 
 
    margin-left: 0px; 
 
} 
 
/*Center Icons*/ 
 

 
nav.sidebar a { 
 
    padding-right: 13px; 
 
} 
 
/*adds border top to first nav box */ 
 

 
nav.sidebar .navbar-nav > li:first-child { 
 
    border-top: 1px #e5e5e5 solid; 
 
} 
 
.nav-collapse, 
 
.nav-collapse.collapse { 
 
    overflow: visible; 
 
} 
 
.navbar .btn-navbar { 
 
    display: none; 
 
} 
 
/*adds border to bottom nav boxes*/ 
 

 
nav.sidebar .navbar-nav > li { 
 
    border-bottom: 1px #e5e5e5 solid; 
 
} 
 
/* Colors/style dropdown box*/ 
 

 
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; 
 
} 
 
/*allows nav box to use 100% width*/ 
 

 
nav.sidebar, 
 
nav.sidebar .container-fluid { 
 
    padding: 0 0px 0 0px; 
 
} 
 
/*colors dropdown box text */ 
 

 
.navbar-inverse .navbar-nav .open .dropdown-menu>li>a { 
 
    color: #777; 
 
} 
 
/*gives sidebar width/height*/ 
 

 
nav.sidebar { 
 
    width: 200px; 
 
    height: inherit; 
 
    margin-left: -160px; 
 
    float: left; 
 
    z-index: 8000; 
 
} 
 
/*give sidebar 100% width;*/ 
 

 
nav.sidebar li { 
 
    width: 100%; 
 
} 
 
/* Move nav to full on mouse over*/ 
 

 
nav.sidebar:hover { 
 
    margin-left: 0px; 
 
} 
 
/* .....NavBar: Fully showing nav bar..... */ 
 

 
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; 
 
}

<nav class="navbar navbar-inverse sidebar" role="navigation"> 
 
    <div class="container-fluid"> 
 
    <div> 
 
     <ul class="nav navbar-nav"> 
 
     <li class="active"><a href="#">Home<span style="font-size:16px;" class="pull-right glyphicon glyphicon-home"></span></a> 
 
     </li> 
 
     <li><a href="#">Profile<span style="font-size:16px;" class="pull-right glyphicon glyphicon-user"></span></a> 
 
     </li> 
 
     <li><a href="#">Messages<span style="font-size:16px;" class="pull-right glyphicon glyphicon-envelope"></span></a> 
 
     </li> 
 
     <li class="dropdown"> 
 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Settings <span class="caret"></span><span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-cog"></span></a> 
 
      <ul class="dropdown-menu forAnimate" role="menu"> 
 
      <li><a href="#">Action</a> 
 
      </li> 
 
      <li><a href="#">Another action</a> 
 
      </li> 
 
      <li><a href="#">Something else here</a> 
 
      </li> 
 
      <li class="divider"></li> 
 
      <li><a href="#">Separated link</a> 
 
      </li> 
 
      <li class="divider"></li> 
 
      <li><a href="#">One more separated link</a> 
 
      </li> 
 
      </ul> 
 
     </li> 
 
     <li><a href="#">Home<span style="font-size:16px;" class="pull-right showopacity glyphicon glyphicon-home"></span></a> 
 
     </li> 
 
     <li><a href="#">Profile<span style="font-size:16px;" class="pull-right showopacity glyphicon glyphicon-user"></span></a> 
 
     </li> 
 
     <li><a href="#">Messages<span style="font-size:16px;" class="pull-right showopacity glyphicon glyphicon-envelope"></span></a> 
 
     </li> 
 
     <li class="dropdown"> 
 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Settings <span class="caret"></span><span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-cog"></span></a> 
 
      <ul class="dropdown-menu forAnimate" role="menu"> 
 
      <li><a href="#">Action</a> 
 
      </li> 
 
      <li><a href="#">Another action</a> 
 
      </li> 
 
      <li><a href="#">Something else here</a> 
 
      </li> 
 
      <li class="divider"></li> 
 
      <li><a href="#">Separated link</a> 
 
      </li> 
 
      <li class="divider"></li> 
 
      <li><a href="#">One more separated link</a> 
 
      </li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</nav> 
 
<div class="main"> 
 
    <!-- Content Here --> 
 
</div>

のですか？ ありがとうございます。

Answer 1

.navbar-navクラスからマージンを削除します。

.navbar-nav{ 
    margin:0; 
} 

も、歯車のアイコンが767pxまで隠されていることに注意してください。 codepen here