css - link background not changing according to what i want -
the .navbar
has 0.5 transparency
, not want background of links changed when hovering. (right background white)
if use navbar-default
class can change background of list items , links not able transparency
thing. , if dont use navbar-default
/inverse able navbar
transparent links have background
property on hover, not able override.
html
<nav role="navigation" class="navbar navbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header"> <a href="#" class="navbar-brand"><img class="logo" src="images/brand.png"></a> <button type="button" class="navbar-toggle" data-target="#navbarcollapse" data-toggle="collapse"><span class="sr-only">toggle</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span></button> </div> <div class="navbar-collapse collapse" id="navbarcollapse"> <ul class="nav navbar-nav"> <li class=""><a href="#">home</a></li> <li><a href="#">about</a></li> <li><a href="#">portfolio</a></li> <li><a href="#">contact</a></li> </ul> </div> </div> </nav>
css
.navbar { background: rgba(0, 0, 0, 0.5); font-family: avro; } .nav li a:hover { background: none; }
sadly need override boostrap style !important
. besides not recommend use background:none
; need override background-color
property recommend add css:
.nav > li > a:hover { background-color: transparent !important; /* smooth override important */ }
Comments
Post a Comment