折叠的导航栏下拉颜色

我正在使用引导程序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

折叠的导航栏下拉颜色

回答

相关问题