Question

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

Answer 1

将以下规则添加到CSS中。

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

要在较大的屏幕上显示背景全宽，请添加：

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

<强> Demo

Answer 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>

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

关于如何扩展在stackoverflow处回答的导航栏的下拉菜单的问题。我昨天看到它，所以其他任何人都可以通过学习使用[bootstrap]标签和字符串文字来使用搜索，例如“navbar”和“dropdown menu”

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

折叠的导航栏下拉颜色

2 个答案: