折叠的导航栏下拉颜色答案

【问题标题】：Collapsed navbar drop down color折叠的导航栏下拉颜色
【发布时间】：2014-05-17 00:26:03
【问题描述】：

我正在使用 bootstrap 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;

【问题讨论】：

标签： css twitter-bootstrap colors navbar

【解决方案1】：

将以下规则添加到您的 CSS。

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

要使背景在大屏幕上全宽，请添加：

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

Demo

【讨论】：

太棒了！感谢您的快速响应...有没有办法让背景颜色变为全宽？
它在我看来是全宽的。您是在谈论演示还是在您的代码中？您能否在原始问题中分享您的标记和相关 CSS？
我已经添加了代码 - 演示是全宽的，直到导航栏不再折叠，我已经设置了，我的所以它总是通过设置 grid-float-breakpoint:999px 所以下降down 在大屏幕上没有显示全宽。
@Ben 我已经更新了我的答案以包含全宽 CSS。让我知道这是否适合您。
非常感谢您的帮助，但是使用此代码可以使导航栏 100% 宽。真的我只希望下拉是 100% 宽，这可能吗？

【解决方案2】：

我遇到了完全相反的问题，需要我的导航将目标向上移动到正常位置。任何准备好接受更严格的片段标识符导航栏挑战的人，请参阅 stackoverflow：http://bit.ly/1avVcwf

当我试图解决我的问题时，我开始使用 div 在页面上上下移动目标的结果，因为默认情况下 div 是块元素，我在预期的片段标识符目标之前立即编写了 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>

我记得我成功地将目标“下推”，但我仍然没有成功将目标定位在页面顶部。所以我只提到我自己的问题，因为我学会了如何解决 Brandon 提出的问题，并提供了我的解决方案，作为可以向下重新定位目标的几个解决方案之一。

关于如何扩展导航栏的下拉菜单的问题在stackoverflow 上得到了回答。我昨天看到了，其他人也可以通过学习使用 [bootstrap] 标记和字符串文字（如“导航栏”和“下拉菜单”）来使用搜索

如果您认为这是一个很好的答案，请标记为答案

【讨论】：