摺疊的導航欄下拉顏色

我正在使用引導程序navbar-fixed-top並將其設置爲始終處於摺疊狀態。摺疊的導航欄下拉顏色

我想滴的顏色到不同的顏色，以主導航欄，有點像在這個網站嘮叨的：http://wearehanno.com/

就如何實現這一目標的任何想法？

<div class="container"> 
    <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="<?php echo home_url(); ?>/"><?php bloginfo('name'); ?></a> 
    </div> 

    <nav class="collapse navbar-collapse" role="navigation"> 
     <?php 
     if (has_nav_menu('primary_navigation')) : 
      wp_nav_menu(array('theme_location' => 'primary_navigation', 'menu_class' => 'nav navbar-nav')); 
     endif; 
     ?> 
    </nav> 
    </div> 

.navbar-brand { 
    display: block; 
    background: url(../img/logo.svg) no-repeat; 
    text-indent: -9999px; 
    height: 54px; 
    width:216px; 
    margin-top:10px; 
    background-position:center; 
} 

.navbar-collapse { background:#333333; } 

@grid-float-breakpoint:  9999px;

來源

2014-04-04 Ben

將下面的規則添加到您的CSS。

.navbar-collapse { background:#cccccc; /*replace with desired color*/ }

要使背景全寬度上更大的屏幕，添加：

@media(min-width: 768px){ 
    .navbar > .container { max-width: 100%; padding: 0; } 
}

Demo

來源

2014-04-04 15:39:02

太棒了！感謝您的迅速反應......有沒有辦法讓背景顏色變成全寬？ – Ben

它似乎對我來說是完整的寬度。你是在談論演示還是在你的代碼？你可以在原始問題中分享你的標記和相關的CSS嗎？ –

我已經添加了代碼 - 演示是完整的寬度，直到導航欄不再摺疊，我已經設置，我的，所以它總是通過設置網格浮動斷點摺疊：999px所以下拉不顯示全寬更大的屏幕。 – Ben

我有完全相反的問題，需要我的導航移動的目標了地方它通常會。任何人準備採取更強硬的片段標識符導航欄挑戰請參閱以下內容：http://bit.ly/1avVcwf

雖然我試圖解決我的問題，我馬上寫了DIV預期片段標識符指標如在此之前：

.bottom-margin-spacer{ 
 
    margin-bottom: 1rem; 
 
}

<div class=bottom-margin-spacer>&nbsp;</div> 
 
<div id="fragment-identifier-target-1>lorum ipsum</div> 
 
<div class=bottom-margin-spacer>&nbsp;</div> 
 
<div id="fragment-identifier-target-2>lorum ipsum</div>

我記得我是成功的，以保持目標的「推」下來，但我仍然沒有成功有目標位置oned在頁面的頂部。所以我只提到我自己的問題，因爲我學會了如何解決布蘭登提出的問題，並將我的解決方案作爲可以向下重新定位目標的解決方案之一。

至於有關如何擴展在這裏回答在stackoverflow導航欄的下拉菜單的問題。我昨天看到它，所以可以任何人通過學習使用搜索使用自舉]標籤和字符串，如「導航欄」和「下拉菜單」

如果你認爲這是一個很好的答案，請標記爲答覆

來源

2015-04-04 22:33:37 ClintonGallagher

摺疊的導航欄下拉顏色

回答

相關問題