1

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.

Community
  • 1
  • 1
Liz
  • 1,369
  • 2
  • 26
  • 61

1 Answers1

0

To change the color to white on scroll, you'll need some javascript.

Here's a working fiddle.

$(document).ready(function(){       
   var scroll_start = 0;
   var startchange = $('#startchange');
   var offset = startchange.offset();
    if (startchange.length){
   $(document).scroll(function() { 
      scroll_start = $(this).scrollTop();
      if(scroll_start > offset.top) {
          $(".navbar-default").css('background-color', '#f0f0f0');
       } else {
          $('.navbar-default').css('background-color', 'transparent');
       }
   });
    }
});

For the transparent navbar, you can edit some css on the navbar-default

.navbar-default {
   background: transparent;
   border: none !important; 
}

UPDATE: https://jsfiddle.net/p7p9t0a0/3/ using affix as mentioned by @daniel

Community
  • 1
  • 1
Archetype2142
  • 190
  • 3
  • 14
  • If using Bootstrap, why writing that much of js code instead of using the affix bootstrap plugin. [Affix - Bootstrap](http://getbootstrap.com/javascript/#affix)? Using the affix class toggles to change colers and other stuff would be much more efficient. – Daniel Jun 12 '16 at 22:16
  • Good call, @Daniel although I don't think that js would severely affect the efficiency of the website, I still have updated the answer with a working [fiddle](https://jsfiddle.net/p7p9t0a0/3/) using Affix. – Archetype2142 Jun 12 '16 at 22:47
  • Thanks for considering my suggestion. Sorry, by efficient I meant why writing new code instead of using already existing functionality. For example if you need to unbind the user event listener for some reasons, $(window).off("scroll") will kill all global listening sroll events. Unbinding the affix event listener with $("#myelement").off("affix") just kills the instance which listening to your chosen element – Daniel Jun 13 '16 at 08:05
  • Thanks for the answer and for the javascript masterclass (@DanielPfisterer). This is very helpful. – Liz Jun 13 '16 at 15:34