Dropdown login menu in navbar in bootstrap 3?

24,144

I built it back, based on bootstrap 3 drop-down component : http://jsfiddle.net/a2ENF/1/

EDIT AFTER COMMENT

 <div class="navbar-collapse collapse">
    <div class="navbar-right">
        <div class="btn-group">
            <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
                Login <span class="caret"></span>
            </button>
            <div class="dropdown-menu" >
                <div class="col-sm-12">
                    <div class="col-sm-12">
                        Login
                    </div>
                    <div class="col-sm-12">
                        <input type="text" placeholder="Uname or Email" onclick="return false;" class="form-control input-sm" id="inputError" />
                    </div>
                    <br/>
                    <div class="col-sm-12">
                        <input type="password" placeholder="Password" class="form-control input-sm" name="password" id="Password1" />
                    </div>
                    <div class="col-sm-12">
                        <button type="submit" class="btn btn-success btn-sm">Sign in</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
Share:
24,144

Related videos on Youtube

eagertoLearn
Author by

eagertoLearn

Updated on July 09, 2022

Comments

  • eagertoLearn
    eagertoLearn over 1 year

    I am new to using bootstrap 3 and experimenting to get this work. but I am not there quite yet. I want to have dropdown log-in in navbar as shown here. but this is for bootstrap 2.* and does not work in bootstrap 3.

    My current attempt here:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>SiteTitle</title>
        <meta name"viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="">
        <meta name="keywords" content="">
    
        <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"</script>
    <script>
    $(document).ready(function()
    {
      //Handles menu drop down
      $('.dropdown-menu').find('form').click(function (e) {
            e.stopPropagation();
            });
      });
    </script>
        <style>
          .navbar .nav > li > .dropdown-menu::before {
      position: absolute;
      top: -7px;
      left: 9px;
      display: inline-block;
      border-right: 7px solid transparent;
      border-bottom: 7px solid #CCC;
      border-left: 7px solid transparent;
      border-bottom-color: rgba(0, 0, 0, 0.2);
      content: '';
    }
    
    .navbar .nav > li > .dropdown-menu::after {
      position: absolute;
      top: -6px;
      left: 10px;
      display: inline-block;
      border-right: 6px solid transparent;
      border-bottom: 6px solid white;
      border-left: 6px solid transparent;
      content: '';
    }
        </style>
    
    </head>
    
    <body>
    <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav navbar-right">
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" id="register" data-toggle="dropdown">Login <b class="caret"></b></a>
                <div class="dropdown-menu" style="width: 400px">
                    <form style="margin: 0px" accept-charset="UTF-8" action="/sessions" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="4L/A2ZMYkhTD3IiNDMTuB/fhPRvyCNGEsaZocUUpw40=" /></div>
                     <fieldset class='textbox' style="padding:10px">
                       <input style="margin-top: 8px" type="text" placeholder="Username" />
                       <input style="margin-top: 8px" type="password" placeholder="Passsword" />
                       <input class="btn-primary" name="commit" type="submit" value="Log In" />
                     </fieldset>
                   </form>
                </div> <!-- /dropdown-menu -->
            </li> <!-- /dropdown -->
            <!--(here goes another dropdown)-->
        </ul>
    </div><!-- /navbar-collapse -->
    
    </body>
    </html>
    

    It isn't like what is above;

    enter image description here

    How to fix this. or any link to code snippet that works with bootstrap 3 would be nice Thanks

  • eagertoLearn
    eagertoLearn over 9 years
    I am looking for something similar to this i.stack.imgur.com/Us1oC.png. what you provided is inline form. but something on this post with carets at right position
  • Yooz
    Yooz over 9 years
    I edited the code to match your example. the screenshot in your question is confusing thought. jsfiddle.net/a2ENF/1 note that I had to recreate wit CSS the arrow on the menu as it does not exit in bootstrap 3. Put the navbar in black for more consistency
  • eagertoLearn
    eagertoLearn over 9 years
    God. you are a Bootstrap expert. This is wonderful. If I want to have fields "forgot password" and "keep me logged in" fields, how to get that. one other related question though. I want a registration form of this i.stack.imgur.com/Us1oC.png. can you help with that? Thanks a ton
  • Yooz
    Yooz over 9 years
    Thanks, the fiddle for the registration form : jsfiddle.net/a2ENF/3. and a login form with remember me and forgot password : jsfiddle.net/a2ENF/4