自定义引导程序导航栏颜色

时间:2013-12-04 19:38:12

标签: css ruby-on-rails twitter-bootstrap sass

我正在关注Ruby on Rails教程并尝试自定义导航栏的颜色。我的标题部分是

<header class="navbar navbar-fixed-top navbar-inverse">
  <div class="navbar-inner">
    <div class="container", id="container">
      <%= link_to "Dog Park", root_path, id: "logo" %>
      <nav>
        <ul class="nav pull-right">
          <li><%= link_to "Home",    root_path %></li>
          <li><%= link_to "About", about_path %></li>
          <li><%= link_to "Sign in", '#' %></li>
        </ul>
      </nav>
    </div>
  </div>
</header>

我从bootstrap 3 sass源文件复制到我的custom.css.scss

//navbar
$navbar-inverse-bg: #6dbcdb;
$navbar-inverse-border: #6dbcdb;

// Inverse navbar

.navbar-inverse {
background-color: $navbar-inverse-bg;
border-color: $navbar-inverse-border;
}

并且没有任何改变仍然是黑色导航栏。任何帮助表示赞赏。感谢

1 个答案:

答案 0 :(得分:3)

我相信导航栏的背景颜色实际上是在.container内的.navbar-inner上设置的。试试这个:

//navbar
$navbar-inverse-bg: #6dbcdb;
$navbar-inverse-border: #6dbcdb;

// Inverse navbar

.navbar-inverse .container {
background-color: $navbar-inverse-bg;
border-color: $navbar-inverse-border;
}