jquery - bootstrap 3 navbar padding and items background -
i'm using bootstrap 3 build website. please tell me how remove padding / margin menu items? looks this:
and have different link colors when hovering items. code this:
<!-- start main navigation --> <nav class="navbar navbar-custom" role="navigation"> <div class="container-fluid"> <!-- brand , toggle grouped better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> </div> <!-- collect nav links, forms, , other content toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li><a href="#"><i class="fa fa-home"></i></a></li> <li><a href="#">politica</a></li> <li class="headerdivider"></li> <li><a href="#">societate</a></li> <li><a href="#">economie</a></li> <li><a href="#">extern</a></li> <li><a href="#">stil de viata</a></li> </ul> </div><!-- /.navbar-collapse --> </nav>
css:
.navbar-custom { background-color:#303334; color:#ffffff; border-radius:0; margin-bottom: 0; } .navbar-custom .navbar-nav > li > { color:#fff; padding-left:20px; padding-right:20px; } .navbar-custom .navbar-nav > .active > a, .navbar-nav > .active > a:hover, .navbar-nav > .active > a:focus { color: #ffffff; background-color:transparent; } .navbar-custom .navbar-nav > li > a:hover, .nav > li > a:focus { text-decoration: none; background-color: #007faa; } .navbar-custom .navbar-brand { color:#eeeeee; } .navbar-custom .navbar-toggle { background-color:#eeeeee; } .navbar-custom .icon-bar { background-color:#007faa; } .navbar-nav { font: 400 1.3em 'oswald', 'arial narrow', arial, sans-serif; text-transform: uppercase; } .fa-home { font-size: 1.2em; } .navbar-nav>li { margin-right: 15px; }
thank you.
based on this fiddle can remove padding using:
.navbar { border: none; /* optional depending on requirements */ } .nav > li > { padding:0; margin:0; }
to add different hover state colors, can use e.g.:
.nav > li > a:hover { color:red; }
Comments
Post a Comment