lundi 13 juin 2016

Bootstrap Transparent Navbar not Working

I am trying to get my bootstrap navbar to have a transparent background initially, but solid white when the user scrolls down. I have consulted many SO posts on this and tried the solutions suggested here and here, but to no effect. I am using Rails 4.2.5 and the bootstrap-sass gem for my bootstrap, imported via my application.scss file using:

@import "bootstrap-sprockets";
@import "bootstrap";

I think something is amok with my bootstrap because I can't achieve a transparent navbar by adding transparent as a class to the navigation menu, yet putting in navbar-inverse works to change the color scheme. Also, I have had to use !important in all of my css items on this stylesheet to get them to override bootstrap. Here's my navbar html.erb code:

 <nav class="navbar" id="main_navbar">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="/"><%= image_tag 'Flame.png', style: "height: 100%"%></a>
      </div>
      <div class="navbar-collapse collapse navbar-responsive-collapse">
        <ul class="nav navbar-nav">
          <li><%= link_to 'Workouts', workouts_path, class:"waves-effect waves-light" %></li>
          <!-- <li><a href="javascript:void(0)">Generator</a></li> -->
          <li><%= link_to 'Blog', posts_path, class:"waves-effect waves-light" %></li>
          <li><%= link_to 'Weekly WOW', weeklies_path, class:"waves-effect waves-light" %></li>
          <li><%= link_to 'Rants', rants_path, class:"waves-effect waves-light" %></li>
          <li><%= link_to 'About Us', home_about_path, class:"waves-effect waves-light" %></li>
          <% if current_user %>
            <li><%= link_to('My Profile', edit_user_registration_path(current_user)) %></li>
          <% else %>
            <li><%= link_to('Sign In', new_user_session_path) %></li>
          <% end %>
        </ul>
      </div>
    </div>
  </nav>

I know this post subject may be duplicating others', but I have read dozens of SO posts and none of them have fixed this issue. Any help would be appreciated.

Aucun commentaire:

Enregistrer un commentaire