0

To start off, I've tested the below code in most of the major browsers; Chrome, Firefox, IE, and Safari.

The exact problem so far only occurs in Chrome when google maps is included in the page, and it is that when giving focus to a navbar link(either through a click or through chrome dev tools), the color of the links fades a very slight amount.

I've tried numerous 'fixes' for this that I've found through research. To name a few:

I've been doing all my testing(save the prior mentioned browsers) on Chrome v43.0.2357.132 m.

To the question I haven't really asked yet, is anyone aware of a fix or work-around for this?

var map;
function initialize() {
  map = new google.maps.Map(document.getElementById('map-canvas'), {
    zoom: 8,
    center: {lat: -34.397, lng: 150.644}
  });
}

google.maps.event.addDomListener(window, 'load', initialize);
#map-canvas {
    height: 400px;
    margin-top: 51px;
    width: 100%;
}

nav a.navbar-brand, nav a span, nav a {
  color: #C52D2D !important;
}
<script src="https://maps.googleapis.com/maps/api/js?v=3.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-inverse navbar-fixed-top" id="my-navbar">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Brand</a>
    </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">    
      <ul class="nav navbar-nav">
        <li>
          <a href="#">Link 1</a>
        </li>
        <li>
          <a href="#">Link 2</a>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
<div id="map-canvas"></div>
Community
  • 1
  • 1
Daedalus
  • 7,586
  • 5
  • 36
  • 61

1 Answers1

0

Add this to your a links text-shadow:0 1px 2px rgba(0,0,0,.9);filter:alpha(opacity=90);opacity:.9; Demo: http://po0.co.uk/daed.php

pokeybit
  • 1,032
  • 11
  • 18
  • With a little adjustment, this worked(`D52D2D` instead of `B52D2D`), needed to keep the colors as close to original as possible. – Daedalus Jul 14 '15 at 02:06