Bootstrap Navbar, меняя цвет фона только на один вид

Question

Я хочу, чтобы мой навигатор имел белый фон на всех страницах/просмотрах, кроме моей домашней страницы. Я хочу, чтобы мой navbar был прозрачным фоном на домашней странице. Есть ли способ достичь этого в бутстрапе?

Я нахожусь в приложении с рельсами, используя бутстрап для переднего конца.

<nav class="navbar navbar-default"> 
    <div class="container yeh"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false" style="margin-top:3px;"> 
     <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="#">MyAPP</a> 
    </div> 

    <div class="navbar-container-right"> 

     <div class="collapse navbar-collapse", id="bs-example-navbar-collapse-1"> 

     <ul class="nav navbar-nav navbar-right"> 

      <li class="dropdown"> 
      <%= link_to 'Investments', proposals_path %> 
      </li> 
      <li> 
      <%= link_to 'Community', users_path %> 
      </li> 
      <% if current_user.present? %> 
      <li> 
      <%= link_to 'Dashboard', dashboard_path %> 
      </li> 
      <li> 
      <%= link_to 'Edit Profile', edit_user_path(current_user) %> 
      </li> 
      <li> 
      <%= link_to 'Sign Out',destroy_user_session_path, :method => :delete %> 
      </li> 
      <% else %> 
      <li> 
      <%= link_to 'Sign In', new_user_session_path %> 
      </li> 
      <li> 
      <%= link_to 'Register Now!', new_user_registration_path %> 
      </li> 
      <% end %> 

     </ul> 
    </div> 

    </div> 
    </div> 
</nav> 

Answer 1

Один из способов сделать это - добавить пользовательский класс только для домашней страницы, которая устанавливает стиль в прозрачный. Например, вы могли бы сделать что-то вроде:

На ваш взгляд стартовой добавить в топе:

<% provide(:nav_style, "transparent-nav") %> 

В файле заголовка:

<nav class="navbar navbar-default <%= yield(:nav_style) %>"> 

В файле SCSS:

.navbar-default{ 
     background-color: white; 
    &.transparent-nav { 
     background-color: transparent; 
    } 
}