title: Bootstrap navbar element stay greyed out in Chrome only
body: <p>SOLVED: The problem came from CSS specificity.Bootstrap's css was judged more specific by Chrome regarding my menu's selector, but not by Firefox and Safari. I'm surprise that such differences still exist between browsers. </p>
  
  <p>I'm also surprised that this:</p>
  
  <pre><code>.nav. navbar-nav .navbar-right li a:link
  </code></pre>
  
  <p>is judged as being less specific than this: </p>
  
  <pre><code>.navbar-default .navbar-nav &gt; li &gt; a
  </code></pre>
  
  <p>Since the second one has only two class and the first one has three class. </p>
  
  <p>Any thought ? </p>
  
  <p>I made this website a few month ago: www.olivierfatzer.ch </p>
  
  <p>Now I've just added this "360°" element in the menu. I'm expecting it to just stay white like the other elements, but for some reason, in Chrome, when I click on it once, it stay greyed for ever. Even if I reboot Chrome, the menu element is still greyed out. </p>
  
  <p><a href="http://i.stack.imgur.com/1SCSQ.png" rel="nofollow">http://i.stack.imgur.com/1SCSQ.png</a></p>
  
  <p>I really don't get it as this menu element is really just a copy/past of the menu element next to it.</p>
  
  <p>This doesn't occur in Firefox / safari. </p>
  
  <p>There is a jquery script adding a class on scroll down, and removing this class on scroll up, to change the appearance of the menu on scroll down. </p>
  
  <p>The build of Chrome is 45.0.2454.101 (64-bit) on MacOSX 10.7.5</p>
  
  <p>I think that what's happening is that Chrome just ignore my CSS for this very element and just apply bootstrap's default style instead. But I can't figure out why just for this element. </p>
  
  <p>Here is the code, even-though I'm not quite sure the problem comes from there: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(window).scroll(function() {
      if($(this).scrollTop() &gt; 10) {
  
  
          $('.navbar-fixed-top').addClass('navbarWhite', 300);
          $('.navbar-right li a:link').addClass('navbar-right-Noir', 400);
          $('.navbar-brand').addClass('navbar-brand-scroll', 400) ;
      } else {
          $('.navbar-fixed-top').removeClass('navbarWhite', 200);
          $('.navbar-right li a:link').removeClass('navbar-right-Noir');
          $('.navbar-brand').removeClass('navbar-brand-scroll');
      }
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.navbar-right li a:link{
   color:rgba(255,255,255,0.5);
  }
  
  .navbar-right li a:link:hover{
   color:white;
  }
  .navbar-right li a:link:focus{
   color:rgba(255,255,255,0.5);
  }
  
  
  .navbar-right-Noir{
   color:#505050 !important;
  }
  .navbar-right-Noir:hover{
   color:#b21212 !important;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul class="nav navbar-nav navbar-right"&gt;
            &lt;li&gt;&lt;a id="aboutMenu" href="#about"&gt;About&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a id="360Menu" href="#360"&gt;360°&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a id="photoMenu" href="#photo"&gt;Photography&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a id="webdesignMenu" href="#webdesign"&gt;Web&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a id="videoMenu" href="#video"&gt;Video&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a id="soundMenu" href="#sound"&gt;Audio&lt;/a&gt;&lt;/li&gt;
  
          &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>