<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <nav class="navbar navbar-expand-sm bg-light navbar-light border fixed-top"> <div class="container"> <!-- Brand --> <a class="navbar-brand" href="#"> <img src="http://velikorodnov.com/html/autotrader/images/logo.png" alt="Logo" style="width:120px;"> </a> <!-- Toggler/collapsibe Button --> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"> <span class="navbar-toggler-icon"></span> </button> <!-- Navbar links --> <div class="collapse navbar-collapse" id="collapsibleNavbar"> <ul class="navbar-nav ml-auto"> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown"> New </a> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Find New Cars</a> <a class="dropdown-item" href="#">Latest Cars</a> <a class="dropdown-item" href="#">Popular Cars</a> <a class="dropdown-item" href="#">Upcoming Cars</a> <a class="dropdown-item" href="#">Offers & Discounts</a> </div> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown"> Used </a> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Find Used Cars</a> <a class="dropdown-item" href="#">Find by Brand</a> <a class="dropdown-item" href="#">Find by Location</a> <a class="dropdown-item" href="#">Upcoming Cars</a> <a class="dropdown-item" href="#">Offers & Discounts</a> </div> </li> <li class="nav-item"> <a class="nav-link" href="#">Sell</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Compare</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown"> News & Reviews </a> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Car News</a> <a class="dropdown-item" href="#">Car Reviews</a> <a class="dropdown-item" href="#">Car Videos</a> <a class="dropdown-item" href="#">Write Review</a> </div> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown"> More </a> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Car Loan</a> <a class="dropdown-item" href="#">EMI Calculator</a> <a class="dropdown-item" href="#">Car Insurance</a> <a class="dropdown-item" href="#">Ask Question</a> </div> </li> <form class="form-inline" action="#"> <input class="form-control mr-sm-2" type="text" placeholder="Search Cars"> <button class="btn btn-success" type="submit"><i class="fa fa-search"></i> Search</button> </form> <button type="button" class="btn btn-light"data-toggle="modal" data-target="#toploginModal">Login</button> </ul> </div> </div> </nav> <div class="modal fade" id="toploginModal" tabindex="-1" role="dialog" aria-labelledby="toploginModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header bg-danger text-white"> <h5 class="modal-title" id="toploginModalLabel">Login</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <form class="form-horizontal"> <div class="form-group"> <input id="email" name="email" placeholder="Email" class="form-control" required="required" type="text"> </div> <div class="form-group"> <input id="password" name="password" placeholder="password" class="form-control" type="text"> </div> <div class="form-group"> <button name="submit" type="submit" class="btn btn-danger">Login</button> <button type="button" class="btn btn-link">Forgot Password?</button> </div> </form> </div> <div class="modal-footer"> <small>New to Gaadiexpert ?<a href="#">Register here</a></small> </div> </div> </div> </div>