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