Transparent Navbar Not Working on Chrome
<p>I am having a problem with a navbar in chrome.  I'm using <code>bootstrap</code>, but the transparency is via custom CSS not through <code>bootstrap</code>'s <code>transparent</code> class.</p>

<p>Here's the erb for the navbar:</p>

<pre><code>&lt;div id="custom-bootstrap-menu" class="navbar navbar-default " role="navigation"&gt;
  &lt;div class="container-fluid"&gt;
    &lt;div class="navbar-header"&gt;&lt;a class="navbar-brand" href="/"&gt;The Manly Art of BBQ&lt;/a&gt;
      &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menubuilder"&gt;&lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;&lt;span class="icon-bar"&gt;&lt;/span&gt;&lt;span class="icon-bar"&gt;&lt;/span&gt;&lt;span class="icon-bar"&gt;&lt;/span&gt;&lt;/button&gt;
    &lt;/div&gt;
    &lt;div class="collapse navbar-collapse navbar-menubuilder"&gt;
      &lt;ul class="nav navbar-nav navbar-right"&gt;
        &lt;li&gt;&lt;%= link_to 'Man Rules', home_site_rules_path, class:"waves-effect waves-light" %&gt;&lt;/li&gt;
        &lt;li&gt;&lt;%= link_to 'BBQ', home_bbq_path, class:"waves-effect waves-light" %&gt;&lt;/li&gt;
        &lt;li&gt;&lt;%= link_to 'My Mancard', root_path, class:"waves-effect waves-light" %&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt; &lt;!-- collapse --&gt;
  &lt;/div&gt; &lt;!-- container-fluid --&gt;
&lt;/div&gt; &lt;!-- custom-bootstrap-menu --&gt;
</code></pre>

<p>And an example of what comes below it on my <code>index</code> page:</p>

<pre><code>&lt;div class="hero-image-row"&gt;
  &lt;div class="hero-image-outer text-center"&gt;
    &lt;div class="hero-image-inner text-center"&gt;
      &lt;%= image_tag 'Background 1.jpg', class: "hero-image",alt: "Delicious-looking hot dogs on a manly grill. Just like God intended." %&gt;
    &lt;/div&gt; &lt;!-- hero-image-inner --&gt;
  &lt;/div&gt; &lt;!-- hero-image-inner --&gt;
&lt;/div&gt; &lt;!-- row --&gt;
</code></pre>

<p>Here's my custom CSS for the navbar, SASS variables included.</p>

<p>SASS Variables:</p>

<pre><code> $transparent-black: rgba(0, 0, 0, 0.1);
 $transparent-white: rgba(255, 255, 255, 0.33);
</code></pre>

<p>And the actual CSS:
    /* NAVIGATION */</p>

<pre><code> #custom-bootstrap-menu.navbar {
   margin-bottom: 0px !important;
 }

 #custom-bootstrap-menu.navbar-default .navbar-brand {
    color: black;
}

#custom-bootstrap-menu.navbar-default {
    font-size: 18px;
    font-family: $font-typewriter;
    background-color: $transparent-white !important;
    border: none;
    border-radius: 0px;
}

#custom-bootstrap-menu.navbar-default .navbar-nav&gt;li&gt;a {
    color: black;
}

#custom-bootstrap-menu.navbar-default .navbar-nav&gt;li&gt;a:hover,
#custom-bootstrap-menu.navbar-default .navbar-nav&gt;li&gt;a:focus {
    color: black;
    background-color: $transparent-black !important;
}

#custom-bootstrap-menu.navbar-default .navbar-toggle {
    border-color: black;
}

#custom-bootstrap-menu.navbar-default .navbar-toggle:hover,
#custom-bootstrap-menu.navbar-default .navbar-toggle:focus {
    background-color: $transparent-black;
}

#custom-bootstrap-menu.navbar-default .navbar-toggle:hover .icon-bar,
#custom-bootstrap-menu.navbar-default .navbar-toggle:focus .icon-bar {
    background-color: $transparent-black;
}

#custom-bootstrap-menu.navbar-default .navbar-toggle {
  border-color: black !important; /* Change border color around this buttons */
}

#custom-bootstrap-menu.navbar-default .navbar-toggle .icon-bar {
  background: black !important; /* Change color for horizontal lines */
}
</code></pre>

<p>And for the content below:</p>

<pre><code>/* HEROS */

.hero-image-row {
   overflow-x: hidden !important;
   width: 100% !important;
   margin-top: -50px !important;
   -webkit-margin-before: -50px !important;
 }

.hero-image-outer {
   width: 300%;
   height: 400px;
   overflow-y: hidden !important;
 }

 .hero-image-inner {
   width: 66%;
   overflow: hidden !important;
 }

 .hero-image {
   height: 400px;
   margin-left: -50%;
   z-index: 0 !important;
 }

 @media screen and (min-width: 700px) {
   .hero-image-outer {
     width: 100%;
   }

   .hero-image-inner {
     width: 100%;
     height: 400px;
   }

   .hero-image {
     width: 100%;
     height: auto;
     margin-left: 0%;
   }
 }
</code></pre>

<p>The transparency works perfectly on IE, but in Chrome the `margin-top: -50px !important' doesn't appear, which makes the navbar appear white.  </p>

<p>If I apply the <code>margin-top</code> and the accompanying <code>webkit-margin</code> line to the <code>.hero-image-outer</code> class instead of <code>.hero-image-row</code> the margin is applied, but the transparency still doesn't work, so it still appears as a white navbar (you can tell it moved up by looking at the image).</p>

<p>Can anyone familiar with Chrome help me fix this?</p>