<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="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous"> <!-- Navigation --> <nav class="navbar navbar-expand-sm bg-dark fixed-top navbar-dark "> <div class="container"> <!-- Brand --> <a class="navbar-brand" href="#"> <img src="http://gaadiexpert.com/public/images/logo/logo.png" alt="Logo" style="width:160px;"> </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="search-new.html">Find New Cars</a> <a class="dropdown-item" href="latest.html">Latest Cars</a> <a class="dropdown-item" href="popular.html">Popular Cars</a> <a class="dropdown-item" href="upcoming.html">Upcoming Cars</a> <a class="dropdown-item" href="offers.html">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="search-used-car.html">Find Used Cars</a> <a class="dropdown-item" href="used-brands.html">Find by Brand</a> <a class="dropdown-item" href="location.html">Find by Location</a> </div> </li> <li class="nav-item"> <a class="nav-link" href="compare.html">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.html">Car News</a> <a class="dropdown-item" href="car-reviews.html">Car Reviews</a> <a class="dropdown-item" href="car-videos.html">Car Videos</a> <a class="dropdown-item" href="write-reviews.html">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="calculator.html">EMI Calculator</a> <a class="dropdown-item" href="insurance.html">Car Insurance</a> <a class="dropdown-item" href="help.html">Ask Question</a> </div> </li> <button type="button" class="btn btn-link text-secondary"data-toggle="modal" data-target="#toploginModal"><i class="fa fa-user text-danger"></i> Sign In</button> <button type="button" class="btn btn-danger btn-sm"><i class="fa fa-plus"></i> Sell Your Car</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-primary text-white"> <h5 class="modal-title" id="toploginModalLabel">Login to Oursite</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <form> <div class="form-row"> <div class="form-group col-md-12"> <input id="email" name="Full Name" placeholder="Email Address" class="form-control" type="text"> </div> <div class="form-group col-md-12"> <input type="pass" class="form-control" id="pass" placeholder="Password"> </div> </div> <div class="form-row"> <div class="form-group col-md-12"> <div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="updatecheck1"> <label class="form-check-label" for="updatecheck1"> <small>By submitting this form you agree to our <a href="#" class="text-muted">terms and conditions </a> </small> </label> </div> </div> </div> <div class="form-row"> <button type="button" class="btn btn-primary btn-block">Submit</button> </div> </form> </div> <div class="modal-footer"> <small>New to our site ?<a href="#">Register here</a></small> </div> </div> </div> </div>

button:focus { outline: 0; } .navbar .dropdown-menu .form-control { width: 200px; }