更改背景顏色

我嘗試使用下面的引導megamenu，我發現在這裏： http://jsfiddle.net/apougher/ydcMQ/更改背景顏色

我無法弄清楚是如何停止類別下拉菜單的背景顏色當我點擊移動視圖中的分類鏈接時，列表將變爲灰色。我希望它保持白色。

這是當我點擊的類別中移動視圖結果：

這就是我想要的。（背景顏色保持白色，即使我點擊類別）

我缺少什麼？

<div class="navbar navbar-default navbar-static-top"> 
    <div class="container"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="#">Logo</a> 
    </div> 
    <div class="navbar-collapse collapse"> 
     <ul class="nav navbar-nav"> 
     <li><a href="#">Home</a></li> 
     <li class="dropdown menu-large""> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Product Listing <b class="caret"></b> </a> 
       <ul class="dropdown-menu megamenu row"> 
       <li> 
    <div class="col-sm-6 col-md-3"> 
     <a href="#" class="thumbnail"> 
     <img src="http://placehold.it/150x120" /> 
     </a> 
    </div> 
    <div class="col-sm-6 col-md-3"> 
    <a href="#" class="thumbnail"> 
     <img src="http://placehold.it/150x120" /> 
     </a> 
    </div> 
    <div class="col-sm-6 col-md-3"> 
    <a href="#" class="thumbnail"> 
     <img src="http://placehold.it/150x120" /> 
     </a> 
    </div> 
    <div class="col-sm-6 col-md-3"> 
    <a href="#" class="thumbnail"> 
     <img src="http://placehold.it/150x120" /> 
     </a> 
    </div> 
       </li> 
       </ul> 
     </li> 

     <li class="dropdown menu-large"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Categories <b class="caret"></b></a>    
      <ul class="dropdown-menu megamenu row"> 
       <li class="col-sm-3"> 
        <ul> 
         <li class="dropdown-header">Glyphicons</li> 
         <li><a href="#">Available glyphs</a></li> 
         <li class="disabled"><a href="#">How to use</a></li> 
         <li><a href="#">Examples</a></li> 
         <li class="divider"></li> 
         <li class="dropdown-header">Dropdowns</li> 
         <li><a href="#">Example</a></li> 
         <li><a href="#">Aligninment options</a></li> 
         <li><a href="#">Headers</a></li> 
         <li><a href="#">Disabled menu items</a></li> 
        </ul> 
       </li> 
       <li class="col-sm-3"> 
        <ul> 
         <li class="dropdown-header">Button groups</li> 
         <li><a href="#">Basic example</a></li> 
         <li><a href="#">Button toolbar</a></li> 
         <li><a href="#">Sizing</a></li> 
         <li><a href="#">Nesting</a></li> 
         <li><a href="#">Vertical variation</a></li> 
         <li class="divider"></li> 
         <li class="dropdown-header">Button dropdowns</li> 
         <li><a href="#">Single button dropdowns</a></li> 
        </ul> 
       </li> 
       <li class="col-sm-3"> 
        <ul> 
         <li class="dropdown-header">Input groups</li> 
         <li><a href="#">Basic example</a></li> 
         <li><a href="#">Sizing</a></li> 
         <li><a href="#">Checkboxes and radio addons</a></li> 
         <li class="divider"></li> 
         <li class="dropdown-header">Navs</li> 
         <li><a href="#">Tabs</a></li> 
         <li><a href="#">Pills</a></li> 
         <li><a href="#">Justified</a></li> 
        </ul> 
       </li> 
       <li class="col-sm-3"> 
        <ul> 
         <li class="dropdown-header">Navbar</li> 
         <li><a href="#">Default navbar</a></li> 
         <li><a href="#">Buttons</a></li> 
         <li><a href="#">Text</a></li> 
         <li><a href="#">Non-nav links</a></li> 
         <li><a href="#">Component alignment</a></li> 
         <li><a href="#">Fixed to top</a></li> 
         <li><a href="#">Fixed to bottom</a></li> 
         <li><a href="#">Static top</a></li> 
         <li><a href="#">Inverted navbar</a></li> 
        </ul> 
       </li> 
      </ul> 

     </li> 
    </ul> 
    </div> 
    </div> 
</div>

CSS

  .navbar-default{ 
      color: #fff; 
      background-color: #ccc6c6; 
      border-color: #aca1a2; 
     } 
     .navbar-default .navbar-nav > li > a{ 
      color:#fff; 
     } 
     .navbar-default .navbar-nav > .dropdown > a .caret{ 
      border-top-color: #fff; 
      border-bottom-color: #fff; 
     } 
     .navbar-default .navbar-brand{ 
      color:#fff; 
     } 
     .menu-large { 
      position: static !important; 
     } 
     .megamenu{ 
      padding: 20px 0px; 
      width:100%; 
     } 
     .megamenu> li > ul { 
      padding: 0; 
      margin: 0; 
     } 
     .megamenu> li > ul > li { 
      list-style: none; 
     } 
     .megamenu> li > ul > li > a { 
      display: block; 
      padding: 3px 20px; 
      clear: both; 
      font-weight: normal; 
      line-height: 1.428571429; 
      color: #333333; 
      white-space: normal; 
     } 
     .megamenu> li ul > li > a:hover, 
     .megamenu> li ul > li > a:focus { 
      text-decoration: none; 
      color: #262626; 
      background-color: #f5f5f5; 
     } 
     .megamenu.disabled > a, 
     .megamenu.disabled > a:hover, 
     .megamenu.disabled > a:focus { 
      color: #999999; 
     } 
     .megamenu.disabled > a:hover, 
     .megamenu.disabled > a:focus { 
      text-decoration: none; 
      background-color: transparent; 
      background-image: none; 
      filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); 
      cursor: not-allowed; 
     } 
     .megamenu.dropdown-header { 
      color: #428bca; 
      font-size: 18px; 
     } 
     @media (max-width: 768px) { 
      .megamenu{ 
      margin-left: 0 ; 
      margin-right: 0 ; 
      } 
      .megamenu> li { 
      margin-bottom: 30px; 
      } 
      .megamenu> li:last-child { 
      margin-bottom: 0; 
      } 
      .megamenu.dropdown-header { 
      padding: 3px 15px !important; 

      } 
      .navbar-nav .open .dropdown-menu .dropdown-header{ 
      color:#fff; 
      } 
     }

來源

2016-04-19 user3361562

通過

.navbar-default .navbar-nav > .open > a{ 
    background : transparent !important; 
}

覆蓋引導的CSS這裏是更新工作jsFiddle

檢查演示了。更新了菜單。

在我的情況下再添加兩個樣式的CSS

.navbar-nav .open .dropdown-menu{ 
    background : white; 
} 
.navbar-nav .open .dropdown-menu .dropdown-header{ 
    color : #999999 !important; 
}

來源

2016-04-19 16:18:10

似乎並沒有幫助 – user3361562

酷我明白了。現在會改變 –

謝謝Syam的幫助，但它不適合我的目的。 – user3361562

改變這些線路

這個代碼在bootstrap.css

.navbar-default { 
    background-color: #ffffff; 
    border-color: #f8f8f8 
} 

.navbar-default .navbar-brand { 
    color: #ffffff 
} 

.navbar-default .navbar-brand:focus, 
.navbar-default .navbar-brand:hover { 
    color: #ffffff; 
    background-color: #0094FF; 
} 

.navbar-default .navbar-text { 
    color: #ffffff 
} 

.navbar-default .navbar-nav>li>a { 
    color: #ffffff 
} 

.navbar-default .navbar-nav>li>a:focus{ 
    color: #ffffff; 
    background-color: #0094FF; 
} 

.navbar-default .navbar-nav>li>a:hover { 
    color: #0065BD ; 
    background-color: #ffffff; 
} 

.navbar-default .navbar-nav>.active>a, 
.navbar-default .navbar-nav>.active>a:focus, 
.navbar-default .navbar-nav>.active>a:hover { 
    color: #555; 
    background-color: #ffffff 
} 

.navbar-default .navbar-nav>.disabled>a, 
.navbar-default .navbar-nav>.disabled>a:focus, 
.navbar-default .navbar-nav>.disabled>a:hover { 
    color: #ccc; 
    background-color: transparent 
}

另一個文件demo.css：

body { 
    padding-bottom: 40px; 
    color: #004165; 
}

在自舉-theme.min.css另一個CSS代碼：

.navbar-default { 
    background-image: -webkit-linear-gradient(top, #004165 0, #004165 100%); 
    background-image: -o-linear-gradient(top, #004165 0, #004165 100%); 
    background-image: -webkit-gradient(linear, left top, left bottom, from(#004165), to(#004165)); 
    background-image: linear-gradient(to bottom, #005E91 0, #005E91 100%); 
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#004165', endColorstr='#004165', GradientType=0); 
    filter: progid: DXImageTransform.Microsoft.gradient(enabled=false); 
    background-repeat: repeat-x; 
    border-radius: 4px; 
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 5px rgba(0, 0, 0, .075); 
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 5px rgba(0, 0, 0, .075) 
}

在bootstrap.min.css另一個變化

.navbar頭（僅用於改變按鈕品牌文本到白色最後一行）{

display:inherit; 
    padding-top: 20px; 
padding-bottom: 20px; 
color:white

}

來源

2016-09-25 08:10:26

更改背景顏色

回答

相關問題