Navbar移動顯示錯誤

我是Angular/Bootstrap開發的新品牌，目前正在爲慈善機構開發一個網站;Navbar移動顯示錯誤

雖然我的Navbar在大型（筆記本電腦/ PC）顯示器上工作完美，但通過移動設備（小屏幕）查看時，您將鼠標懸停的任何菜單項都變爲透明。

我知道它明顯是一個CSS屬性，我假設它的懸停屬性，但我不知道如何表達它在我的自定義CSS。

這裏有一個截屏，顯示我的意思

我使用下面的CSS代碼，以幫助格式化我的導航欄..

.navbar-xs { min-height:65px; height: 65px; background-color: #ffffff; border: 0;} 
.navbar-xs .navbar-brand{ padding: 0px 12px;font-size: 20px;line-height: 35px; background-color: #ffffff;} 
.navbar-xs .navbar-nav > li > a { padding-top: 15px; padding-bottom: 5px; line-height: 28px; color: #000fb5; background-color: #ffffff; } 
body { 
    padding-top: 65px; 
}

而這裏的HTML的一個小樣本導航欄（其大菜單，所以我只包括一個樣本）

<nav class="navbar navbar-xs navbar-default navbar-fixed-top" role="navigation"> 
       <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button> 
      <a href="#/" class="pull-left"><img src="images/logo.png"></a> 
     </div> 
     <div id="navbar" class="navbar-collapse collapse"> 
      <ul class="nav navbar-nav navbar-right"> 

      <!-- Home Menu --> 
      <li class="dropdown"> 
       <a href="" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><b>Home </b><span class="caret"></span></a> 
       <ul class="dropdown-menu multi-level"> 
       <li class="dropdown-submenu"> 
        <a href="" class="dropdown-toggle" data-toggle="dropdown">About Us</a> 
        <ul class="dropdown-menu"> 
         <li><a href="#who">Who We Are</a></li> 
         <li><a href="#what">What We Do</a></li> 
         <li><a href="#why">Why We Do It</a></li> 
         <li><a href="#history">Our History</a></li> 
        </ul> 
        </li> 
       <li><a href="#news">Latest News</a></li> 
       <li><a href="#events">Coming Events</a></li> 
       <li><a href="#calendar">Calendar</a></li> 
       <li><a href="#ceo">CEO Message</a></li> 
       <li><a href="#bibleRead">Bible Reading</a></li> 
       <li><a href="#pray">Pray For Us</a></li> 
       </ul> 
      </li>

否則，網站目前可以在這裏查看; Current Website

否則，我的源可以在我的GitHub這裏查看; GitHub source

如果任何人有任何關於如何改善網站的建議，我歡迎反饋 - 因爲慈善機構不會給我提供任何。

來源

2016-11-28 BlissSol

你需要的bgcolor添加到您的下拉導航

添加下面的代碼應該工作

@media (max-width: 767px){ 
    .navbar-nav .open .dropdown-menu { 
     background-color: #e7e7e7!important; 
    } 
    .container>.navbar-collapse { 
     background-color: #fff!important; 
    } 
}

來源

2016-11-28 07:08:59 Rahul

回覆我的回答如上 - 我厭倦了你的建議，但也沒有奏效。 – BlissSol

非常棒！感謝堆:-) – BlissSol

您在文件中添加CSS驗證碼ADDD

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

來源

2016-11-28 07:20:19

這也沒有工作... 再次使用鉻內的檢查功能，如果我有以下它將工作; '.navbar-collapse.in overflow-y：auto; background-color：white; }' 但我仍然無法讓它覆蓋navbar.css中的CSS設置 – BlissSol

Navbar移動顯示錯誤

回答

相關問題