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> 

fiddle


Comments

Popular posts from this blog

dns - How To Use Custom Nameserver On Free Cloudflare? -

python - Pygame screen.blit not working -

c# - Web API response xml language -