引导导航栏下拉按钮活动颜色问题

时间:2016-07-25 18:25:42

标签: html css ruby-on-rails twitter-bootstrap css3

这是我的导航栏的图片。请注意在活动时如何简单地强调家庭... enter image description here

这是我的导航栏的另一张照片。不幸的是,当它处于活动状态时,下拉菜单会突出显示为此颜色,并且我尝试过的css都没有能够修复它。它应该具有透明背景,就像它上面的所有背景一样。任何帮助是极大的赞赏。 enter image description here

这是我的导航栏html ...

<nav role="navigation" class="navbar navbar-default navbar-fixed-top font">
  <div class="container">

    <!-- Title -->
    <div class="navbar-header pull-left">
      <div class="navbar-brand-image"> <%=link_to "#{image_tag 'rsz_1rsz_13logo.png'}".html_safe ,root_path %></div>
    </div>

    <button id="nav-icon1" class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">

      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>

    </button>


    <!-- Additional navbar items -->
    <div class="collapse navbar-collapse navbar-right navHeaderCollapse">
      <!--                      pull-right keeps the drop-down in line -->
      <ul class="nav navbar-nav">

          <li class="<%= 'active' if current_page?(root_path) %>"><% yield (:home)%><%= link_to "Home", root_path%></li>
        <li class="<%= 'active' if current_page?(services_path) %>"><% yield (:services)%><%= link_to "Services", services_path%></li>
        <li class="<%= 'active' if current_page?(careers_path) %>"><% yield (:careers)%><%= link_to "Careers", careers_path%></li>
          <li class="<%= 'active' if current_page?(contact_path) %>"><% yield (:contact)%><%= link_to "Contact Us", contact_path %>
          <li class="<%= 'active' if current_page?(about_us_path) %>"><% yield (:about_us)%><%= link_to "About Us", about_us_path%></li>
        <li class="dropdown nav-drop">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Language <span class="caret"></span></a>
          <ul class="dropdown-menu" style="  background-color: rgba(54,54,54, .6);">
            <li><a href="/">English</a></li>
            <li><a href="/de/home">German</a></li>
            <li class="disabled"><a href="#">Spanish - Coming Soon</a></li>
          </ul>
        </li>
        </ul>
      </ul>
    </div>

1 个答案:

答案 0 :(得分:1)

Bootstrap的$repairJobs = RepairJob::with('repairJobPhoto', 'city', 'vehicle') ->where('active', '=', 'Y') ->whereNotExists(function($query) { $query->select(DB::raw(1)) ->from('DismissedRequest') ->whereRaw('RepairJob.id = DismissedRequest.id'); })->get(); 类会覆盖很多CSS规则,因此您需要提供一个特殊规则,例如:

.open

您可能还必须使用.open > .dropdown-toggle { background: transparent; } 声明。