2

I've got a rails app with a navbar-top with a brand element. When I mouse over it the back of it turns black. I don't see anything on the browser console that helps here. Does anybody have some experience with this? Here's what it looks like:

enter image description here

Here's all the CSS that is displayed in the inspect element portion of the console:

media="all"
.navbar .brand {
float: left;
padding: 20px 5px 5px 0px;
margin-left: -20px;
font-size: 35px;
font-weight: 200;
color: white;
text-shadow: 0 0px 0;
}
localhostmedia="all"
.navbar .brand {
float: left;
display: block;
padding: 10px 20px 10px;
margin-left: -20px;
font-size: 20px;
font-weight: 200;
color: #777777;
text-shadow: 0 1px 0 #ffffff;
}
localhostmedia="all"
a:visited {
color: #666;
}
localhostmedia="all"
a {
color: #000;
}
localhostmedia="all"
a {
color: #0088cc;
text-decoration: none;
}
user agent stylesheeta:-webkit-any-link {
color: -webkit-link;
text-decoration: underline;
cursor: auto;
}
Inherited from div.navbar-inner
localhostmedia="all"
.navbar-inner {
color: #fff !important;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0);
}
Inherited from body.main
localhostmedia="all"
body {
color: #333;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 13px;
line-height: 18px;
}
localhostmedia="all"
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 20px;
color: #333333;
}
Inherited from html
localhostmedia="all"
html {
font-size: 100%;

Here's the partial view that the navbar is part of:

<div class="navbar navbar-top">
  <div class="navbar-inner">
    <div class="container-fluid">
     <a class="brand" href=<%= root_path %>>Visual Haggard (beta)</a>
        <ul class="nav">
          <li><a href= <%= illustrations_path %>>Illustrations</a></li>
          <li><a href= <%= novels_path %>>Novels</a></li>
          <% if current_user %>
            <li><a href= <%= editions_path %>>Editions</a></li>
          <% end %>
        </ul>

        <%= form_tag search_path, :method => 'get', :class => "form-search", :style => "height:24px;" do %>
          <div class="input-append" style="padding-top:5px;"> 
            <%= text_field_tag :search, params[:search], :class=>"span3 watermark search-query", :placeholder => "novel, illustration, or tag..."%>
            <button class="btn" type="submit"><i class="icon-search"></i></button>     
          </div>
        <% end %>                      
    </div> 
  </div>
</div>
Joe Essey
  • 3,457
  • 8
  • 40
  • 69

2 Answers2

2

Most browsers (At least Safari and Chrome on mac) have an "Inspect element" option when you right click. From there, you can see all the css styles that are applying to the particular element, then overwrite it in your custom stylesheet. Posting the view and the css would allow a more specific response.

There's this bit in the css:

a {
color: #000;
}

It's probably overridden, but maybe it's taking precedence on :hover? I'd try specifying the a color to be transparent and see if that makes a difference. Possibly using:

.navbar .brand:hover {
  color: transparent;
}

Sorry if it's not correct, I'm by no means a CSS expert.

ericeason
  • 324
  • 2
  • 6
0

I would suggest to create a stylesheet file to overwrite the brand class. In the Bootstrap's documentation you can find the defaults for all the classes .

R Milushev
  • 4,295
  • 3
  • 27
  • 35