How can you remove hover from navbar-brand with logo

Question

Double navbar-brand to get both text and logo seems to work perfectly. However, is it easy to remove the hover-hilite for the text brand? My links and drop downs do stuff, but I do not want functionality for clicking on the brand title. The hover is misleading.

<nav class="navbar navbar-inverse navbar-fixed-top role=navigation">
    <div id="navbar-container" class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <!-- is it possible to turn off the hover/highlight for the text brand? -->
            <a class="navbar-brand" href="#">Codeshelf</a>
            <a class="navbar-brand" href="#"><img src="favicon.gif" width="24" height="24"></a>
        </div>
    <!-- links, dropdowns -->
    </div><!-- /.container -->
</nav>

Answer 1

You can disable the text brand hover by adding the following CSS and making sure it comes after the core bootstrap CSS file.

.navbar-inverse .navbar-brand:hover, 
.navbar-inverse .navbar-brand:focus {
  background-color: transparent;
  color: #999999;
}

That should do the trick! here is a FIDDLE

Answer 2

The solution of Amir5000 has not worked for me.

You can also fix this with this:

<a class="navbar-brand" href="#" style="background-color: transparent !important;">Codeshelf</a>
<a class="navbar-brand" href="#" style="background-color: transparent !important;"><img src="favicon.gif" width="24" height="24"></a>

Set a manual inline CSS fix with !important to overwrite any other CSS files that modify this setting.