css - How to turn an HTML navbar <li> into a stand-alone button -
i using bootstrap create website , added functionality drop-down sign newsletter.
how can make drop-down standalone drop-down separate navbar?
i added <button> tags around entire html code sign-up button separates drop-down. ideally, @ bottom of drop-drown.
<button class="dropdown btn"> <a href="http://www.jquery2dotnet.com" class="dropdown-toggle" data-toggle="dropdown">newsletter sign <b class="caret"></b></a> <ul class="dropdown-menu" style="padding: 15px;min-width: 250px;"> <li> <div class="row"> <div class="col-md-12"> <form class="form" role="form" method="post" action="login" accept-charset="utf-8" id="login-nav"> <div class="form-group"> <label class="sr-only" for="newsletter-signup-name">name</label> <input type="email" class="form-control" id="newsletter-signup-name" placeholder="name" required> </div> <div class="form-group"> <label class="sr-only" for="newsletter-signup-email">email</label> <input type="email" class="form-control" id="newsletter-signup-email" placeholder="email address" required> </div> <div class="checkbox"> <label> <input type="checkbox"> remember me </label> </div> <div class="form-group"> <button type="submit" class="btn btn-success btn-block">sign up</button> </div> </form> </div> </div> </li> <li class="divider"></li> </ul> </button>
not sure why want encapsulate entire form button. use button instead of anchor if need button.
<div class="dropdown"> <button class="btn dropdown-toggle" data-toggle="dropdown">newsletter sign <b class="caret"></b> </button> <ul class="dropdown-menu" style="padding: 15px;min-width: 250px;"> <li> <div class="row"> <div class="col-md-12"> <form class="form" role="form" method="post" action="login" accept-charset="utf-8" id="login-nav"> <div class="form-group"> <label class="sr-only" for="newsletter-signup-name">name</label> <input type="email" class="form-control" id="newsletter-signup-name" placeholder="name" required> </div> <div class="form-group"> <label class="sr-only" for="newsletter-signup-email">email</label> <input type="email" class="form-control" id="newsletter-signup-email" placeholder="email address" required> </div> <div class="checkbox"> <label> <input type="checkbox">remember me</label> </div> <div class="form-group"> <button type="submit" class="btn btn-success btn-block">sign up</button> </div> </form> </div> </div> </li> <li class="divider"></li> </ul> </div>
Comments
Post a Comment