自定義的引導程序導航欄響應問題

Question

我已經創建了一個垂直的導航欄，它在成爲移動設備上的水平條時具有切換功能方面的問題。我試過繞過它幾次，最後我爲移動版本創建了一個單獨的樣式表。但是，現在它會干擾桌面版本，如果我嘗試隱藏移動版本，切換功能將停止工作。

我確定必須有一個更簡單的方法來做到這一點，但我還沒有發現任何工作。

HTML 撥動導航 KEDEV

 <!-- Collect the nav links, forms, and other content for toggling --> 
     <div class="collapse navbar-collapse-ex1-collapse" id="navbar-collapse-ex1-collapse"> 
      <ul class="nav navbar-nav-mobile"> 
       <li> 
        <a href="#about"><img class="icon" src="home.png"></a> 
       </li> 
       <li> 
        <a href="#services"><img class="icon" src="services.png"></a> 
       </li> 
       <li> 
        <a href="#portfolio"><img class="icon" src="portfolio.png"></a> 
       </li> 
       <li> 
        <a href="#contact"><img class="icon" src="contact.png"></a> 
       </li> 
       </ul> 
      <ul class="nav navbar-nav social"> 
       <li> 
        <a href="#"><img class="iconSO" src="twitter.png"></a> 
       </li> 
       <li> 
        <a href="#"><img class="iconSO" src="linkedin.png"></a> 
       </li> 
       <li> 
        <a href="#"><img class="iconSO" src="blogspot.png"></a> 
       </li> 
      </ul> 
     </div> 
     <!-- /.navbar-collapse --> 
    </div> 
    <!-- /.container --> 
</nav> 
<!-- End Mobile Nav --> 

<!-- Navigation --> 
<nav class="navbar navbar-inverse navbar-fixed-right" role="navigation"> 
    <div class="container"> 
     <!-- Brand and toggle get grouped for better mobile display --> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand" href="#about">KEDEV</a> 
     </div> 

     <!-- Collect the nav links, forms, and other content for toggling --> 
     <div class="collapse navbar-collapse" id="navbar-collapse"> 
      <ul class="nav navbar-nav"> 
       <li> 
        <a mouseover="buttonPress('1') class="menu-button" id="aboutButton" data-toggle="tooltip" data-placement="right" title="About" href="#about"><img class="icon" src="home.png"></a> 
       </li> 
       <li> 
        <a href="#services"><img class="icon" src="services.png"></a> 
       </li> 
       <li> 
        <a href="#portfolio"><img class="icon" src="portfolio.png"></a> 
       </li> 
       <li> 
        <a href="#contact"><img class="icon" src="contact.png"></a> 
       </li> 
       </ul> 
      <ul class="nav navbar-nav social"> 
       <li> 
        <a href="#"><img class="iconSO" src="twitter.png"></a> 
       </li> 
       <li> 
        <a href="#"><img class="iconSO" src="linkedin.png"></a> 
       </li> 
       <li> 
        <a href="#"><img class="iconSO" src="blogspot.png"></a> 
       </li> 
      </ul> 
     </div> 
     <!-- /.navbar-collapse --> 
    </div> 
    <!-- /.container --> 
</nav> 

CSS

/* MobileNav*/ 
.navbar-mobile { 
    display:none; 
} 

.mnavbar-header{ 
    display:none; 
} 
.navbar-fixed-top{ 
     display:none!important; 
} 
/*Navigation*/ 
.container { 
    width:100%; 
    margin:0 auto; 
    padding:0; 
    border-sizing:border-box; 
} 
.navbar { 
    margin-bottom:0; 
    z-index:31; 
    position:fixed; 
    float:none; 
    display:block; 

} 
.navbar-collapse { 
    height: 100%; 
    border-top: 0; 
    box-shadow: none; 
    max-height: none; 
    padding-left:0; 
    padding-right:0; 
    float:none; 
    display:block; 

} 

    .navbar-collapse.collapse { 
    display: block !important; 
    width:100%; 
    overflow: visible !important; 

     margin-bottom:0px; 
    } 

.navbar-collapse.in { 
    overflow-x: visible; 
    } 

    .navbar-nav, 
.navbar-nav > li, 
.navbar-left, 
.navbar-right, 
.navbar-header 
{float:none !important; 
left:0;right:auto;} 

.navbar-collapse .navbar-nav.navbar-right:last-child { 
    margin-right: 0; 
} 
.navbar-brand { 
    color:white; 
    margin-bottom: 6em; 
    font-size:2em; 
} 
.navbar li { 
    margin: 0.5em 0.5em 0.5em 0.5em ; 
    position:relative; 

} 
.icon { 
    width:2em; 
    height:2em; 
} 
.social { 
    margin-top:20em; 
} 
.social li { 
    display:inline-block; 
    margin: -1em -1.3em -2em -1.1em ; 
} 
.iconSO { 
    width:2.3em; 
    height:2.3em; 
} 

/* Media Query */ 

@media (max-width: 767px) { 

.navbar { 
     display:none; 
} 
.navbar-mobile { 
     display:block !important; 
     height:auto; 
     width:auto; 
    } 
.mnavbar-header{ 
    display:block!important; 
    overflow:visible; 
} 

.navbar-fixed-top { 
    display:block !important; 
    overflow:visible; 
} 

.navbar-collapse-ex1-collapse { 
     background-color: rgba(0, 0, 0, 0.6) !important; 
     float: left; 
     margin-top: 0; 
     margin-bottom: 0; 

} 
#navbar-collapse-ex1-collapse { 
    position:fixed; 
    left:0; 
    width:100%; 
    height:100%; 
    overflow:visible; 
    display:block ; 

} 

.nav-collapse.collapse-ex1-collapse { 
display: block !important; 
height: auto !important; 
overflow: hidden !important; 


} 


.navbar-brand { 
     margin-bottom:0; 
     display:block; 
    } 

.navbar li { 
     font-size:2em; 
     text-align:center; 
     display:inline; 

} 


body { 
     padding-left: 0; 
     padding-right: 0; 
    } 
} 

Answer 1

謝謝您的建議。我已經與它合作了幾個小時，並找到了答案。

我刪除了很多我的媒體查詢CSS，並添加了一個溢出：隱藏到我的.navbar-mobile。

`@media (max-width: 767px) { 

.navbar-mobile { 
     display:block !important; 
     height:auto; 
     width:auto; 
     background-color: rgba(0, 0, 0, 0.6) !important; 
     overflow:hidden; 
    } 

.mnavbar-header{ 
    display:block!important;  
    } 

.navbar-collapse-ex1-collapse { 
    float: left; 
    margin-top: 0; 
    margin-bottom: 0; 
    } 

#navbar-collapse-ex1-collapse { 
    left:0; 
    width:100%; 
    height:100%; 
    display:block ; 

    } 

.nav-collapse.collapse-ex1-collapse { 
    display: block !important; 
    height: auto !important; 
    } 

.collapse.navbar-collapse-ex1-collapse { 
    background-color: rgba(0, 0, 0, 0,1) !important; 
    } 

.navbar-brand { 
    margin-bottom:0; 
    display:block; 
    } 

.navbar li { 
    font-size:2em; 
    text-align:center; 
    display:inline; 
    } 

.navbar-collapse-ex1-collapse { 
    display:block; 
    } 
} 

我仍在調整透明度和背景，但現在切換工作！

Answer 2

在這裏，這應該做的伎倆。

@media (max-width: 1992px) { 
    .navbar-header { 
     float: none; 
    } 
    .navbar-left,.navbar-right { 
     float: none !important; 
    } 
    .navbar-toggle { 
     display: block; 
    } 
    .navbar-collapse { 
     border-top: 1px solid transparent; 
     box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); 
    } 
    .navbar-fixed-top { 
     top: 0; 
     border-width: 0 0 1px; 
    } 
    .navbar-collapse.collapse { 
     display: none!important; 
    } 
    .navbar-nav { 
     float: none!important; 
     margin-top: 7.5px; 
    } 
    .navbar-nav>li { 
     float: none; 
    } 
    .navbar-nav>li>a { 
     padding-top: 10px; 
     padding-bottom: 10px; 
    } 
    .collapse.in{ 
     display:block !important; 
    } 
}