<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> <div id="tinkersale-navbar"> <div class="container"> <div class="row row1"> <div class="col-sm-2"> <h2 style="margin:0px;"><span class="largenav">Tinkersale</span></h2> </div> <div class="tinkersale-navbar-search smallsearch col-sm-7 col-xs-10"> <div class="row"> <input class="tinkersale-navbar-input col-xs-5" type="" placeholder="Search local business in india" name=""> <input name="searchinput" type="text" placeholder="Please type a location" class="tinkersale-navbar-search-input col-xs-4"> <button class="tinkersale-navbar-button col-xs-1"> <svg width="15px" height="15px"> <path d="M11.618 9.897l4.224 4.212c.092.09.1.23.02.312l-1.464 1.46c-.08.08-.222.072-.314-.02L9.868 11.66M6.486 10.9c-2.42 0-4.38-1.955-4.38-4.367 0-2.413 1.96-4.37 4.38-4.37s4.38 1.957 4.38 4.37c0 2.412-1.96 4.368-4.38 4.368m0-10.834C2.904.066 0 2.96 0 6.533 0 10.105 2.904 13 6.486 13s6.487-2.895 6.487-6.467c0-3.572-2.905-6.467-6.487-6.467 "></path> </svg> </button> </div> </div> <div id="tinkersale-navbar" class="collapse navbar-collapse"> <ul class="nav navbar-nav pull right"> <li class="active"><a href="#">Add</a></li> <li class=" dropdown"><a href="#" class="dropdown-toggle active" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Categories <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Home Decor</a></li> <li><a href="#">Fashion</a></li> </ul> </li> <li class=" dropdown"><a href="#" class="dropdown-toggle active" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Myaccount<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Change Password</a></li> <li><a href="#">Myprofile</a></li> </ul> </li> </ul> </div> </div> </div> </div> <div class="container"> <div class="row row-offcanvas row-offcanvas-right"> <p class="pull-right visible-xs"> <button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">Toggle nav</button> </p> <div class="row"> <div class=" col-xs-2"> <select id="" name="search" class="form-control"> <option value="1">Popular</option> <option value="2">A-Z</option> <option value="3">By Rating</option> </select> </div> </div> <div class="col"> <div class="row-xs-6 row-lg-4"> <h2>Heading</h2> <pre>White House Apparels Pvt Ltd www.tendertm.com is a leading procurement information & service provider. TenderTm is changing the procurement & marketing strategy i... <pre><a class="btn btn-default" href="#" role="button">View details »</a></p> </div><!--/.col-xs-6.col-lg-4--> <div class="row-xs-6 row-lg-4"> <h2>Heading</h2> <pre> Block B, City Centre 2, 1st Floor, Shop No A 113 & A114, Kolkata - 700156, Near Rajarhat (Map) Shoe Dealers-Khadims , Shoe Dealers ...more <pre><a class="btn btn-default" href="#" role="button">View details »</a></p> </div><!--/.col-xs-6.col-lg-4--> <div class="row-xs-6 row-lg-4"> <h2>Heading</h2> <p></p> <p><a class="btn btn-default" href="#" role="button">View details »</a></p> </div><!--/.col-xs-6.col-lg-4--> <div class="row-xs-6 row-lg-4"> <h2>Heading</h2> <p></p> <p><a class="btn btn-default" href="#" role="button">View details »</a></p> </div><!--/.col-xs-6.col-lg-4--> <div class="row-xs-6 row-lg-4"> <h2>Heading</h2> <p></p> <p><a class="btn btn-default" href="#" role="button">View details »</a></p> </div><!--/.col-xs-6.col-lg-4--> <div class="row-xs-6 row-lg-4"> <h2>Heading</h2> <pre> Add Photo , Kolkata Furniture Dealers Mobile Phone Dealers Mobile Phone Dealers-Xiaomi CCTV Dealers Online Shopping Websites Saw Dealers-Others Carafe Dealers-Others Belt Dealers-Others <pre> <pre><a class="btn btn-default" href="#" role="button">View details »</a></p> </div><!--/.col-xs-6.col-lg-4--> </div><!--/row--> </div> <footer> <p>© Company 2018.Rights are reserved</p> </footer> </div>

#tinkersale-navbar { background-color: #ddea11; color: #FFFFFF; } .row1 { padding-top: 10px; padding-bottom: 20px; } footer { border: 1; padding: 30px 0; } .tinkersale-navbar-input { padding: 11px 16px; border-radius: 20px 0 0 2px; border: 1 none; outline: 0 none; font-size: 15px; } .tinkersale-navbar-search-input { padding: 11px 16px; border-radius: 0px 0 0 2px; border: 1 none; outline: 1 none; font-size: 15px; } .tinkersale-navbar-button { background-color: #666666; border: 1px solid #09000b; border-radius: 0 20px 20px 0; color: #565656; padding: 10px 0; height: 47px; cursor: pointer; } .item-number { border-radius: 3px; background-color: rgba(0, 0, 0, .1); height: 20px; padding: 3px 6px; font-weight: 500; display: inline-block; color: #fff; line-height: 12px; margin-left: 10px; } .dropdown { position: relative; display: inline-block; margin-bottom: 0px; } .dropdown:hover { background-color: #fff; } .dropdown:hover .links { color: #000; } .dropdown:hover .dropdown-menu { display: block; } .dropdown .dropdown-menu { position: absolute; top: 100%; display: none; background-color: #fff; color: #333; left: 0px; border: 0; border-radius: 0; box-shadow: 0 4px 8px -3px #555454; margin: 0; padding: 0px; } .links { color: #fff; text-decoration: none; } .links:hover { color: #fff; text-decoration: none; } .profile-links { font-size: 12px; font-family: 'Roboto', sans-serif; border-bottom: 1px solid #e9e9e9; box-sizing: border-box; display: block; padding: 0 11px; line-height: 23px; } .profile-li{ padding-top: 2px; } .largenav { display: none; } .smallnav{ display: block; } .smallsearch{ margin-left: 15px; margin-top: 15px; } .menu{ cursor: pointer; } @media screen and (min-width: 768px) { .largenav { display: block; } .smallnav{ display: none; } .smallsearch{ margin: 0px; } }