html - Styling A Navbar Button With Bootstrap -
here link test page: http://goo.gl/j8bs8p
i'm trying navbar button have same styles basic button.
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-left"> <li class="hidden"> <a href="#page-top"></a> </li> <li> <a class="page-scroll" href="#page-top">home</a> </li> <li> <a class="page-scroll" href="#services">about</a> </li> <li> <a class="page-scroll" href="#portfolio">services</a> </li> <li> <a class="page-scroll" href="#about">service area</a> </li> <li> <a class="page-scroll" href="#team">contact</a> </li> <li> <button type="button" class="btn btn-primary">basic button</button> </li> <li> <a class="btn btn-primary navbar-btn" href="#contact">navbar button</a> </li><!-- <li> <a class="navbar-btn button-id-1" href="tel:713-992-0916" style="padding:2px;background-color:rgba(174,20,42,0.5 )"> click call <span class="glyphicon glyphicon-earphone" style="padding-left:10px; padding-right:10px;"></span>713-992-0916 </a> </li>--> </ul> </div>
i thought styling button easy copying basic buttons stylings , making new class navbar button, so...
.navbar-btn { border-color: #ae142a; text-transform: uppercase; font-family: montserrat,"helvetica neue",helvetica,arial,sans-serif; font-weight: 700; color: #fff; background-color: #ae142a; } .btn-primary { border-color: #ae142a; text-transform: uppercase; font-family: montserrat,"helvetica neue",helvetica,arial,sans-serif; font-weight: 700; color: #fff; background-color: #ae142a; }
thanks help.
here go
.navbar-btn { border-color: #ae142a; text-transform: uppercase; font-family: montserrat,"helvetica neue",helvetica,arial,sans-serif; font-weight: 700; color: #fff; background-color: #ae142a; padding: 6px 12px !important; margin: 0px 0px 0px 10px; } .navbar-btn:hover { color: #fff; background-color: #337ab7 !important; border-color: #2e6da4 !important; } .btn-primary { border-color: #ae142a; text-transform: uppercase; font-family: montserrat,"helvetica neue",helvetica,arial,sans-serif; font-weight: 700; color: #fff; }
html
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-left"> <li class="hidden"> <a href="#page-top"></a> </li> <li> <a class="page-scroll" href="#page-top">home</a> </li> <li> <a class="page-scroll" href="#services">about</a> </li> <li> <a class="page-scroll" href="#portfolio">services</a> </li> <li> <a class="page-scroll" href="#about">service area</a> </li> <li> <a class="page-scroll" href="#team">contact</a> </li> <li> <button type="button" class="btn btn-primary">basic button</button> </li> <li> <a class="btn btn-primary navbar-btn" href="#contact">navbar button</a> </li><!-- <li> <a class="navbar-btn button-id-1" href="tel:713-992-0916" style="padding:2px;background-color:rgba(174,20,42,0.5 )"> click call <span class="glyphicon glyphicon-earphone" style="padding-left:10px; padding-right:10px;"></span>713-992-0916 </a> </li>--> </ul> </div>
Comments
Post a Comment