I'm currently working on a Rails application that has a navbar-top with a brand element. However, I've encountered an issue where the background of the brand element turns black when I hover over it. Despite inspecting the browser console, I couldn't find any relevant information to solve this problem. Has anyone experienced something similar? Here's a snippet of what I'm dealing with:
Below is all the CSS code that was provided in the inspect element section 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 a glimpse of the partial view containing the navbar:
<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>