"header search bar"
Bootstrap 3.0.0 Snippet by locvfx

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.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 ----------> <section id="home" class="helpr-section helpr-layout-1 section section-inverse-color" > <div class="container"> <div class="helpr-content" data-stellar-offset-parent="true"> <!-- helpr TEXT --> <div class="helpr-text" data-wow-duration="1s" data-wow-delay="0.5s"> <!-- TAGLINE --> <div class="webHomeTitle"> <h1 class="helpr-title">Let us help</h1> </div> <div class="home-service clearfix"> <div class="wrapper-demo1"> <div id="dd1" class="wrapper-dropdown-3" tabindex="1"> <span class="active">Select City</span> <ul class="dropdown"> <li><a href="javascript:;" class="icon-menu " data-id="2" data-value="Bengaluru">Bengaluru</a></li> </ul> </div> </div> <div class="wrapper-demo"> <div id="dd" class="wrapper-dropdown-2" tabindex="1"><span>Select a Service</span> <ul class="dropdown"> <li><a href="javascript:;" class="icon-2 icon-menu" data-id="2" data-value="Pest Control">Pest Control</a></li> <li><a href="javascript:;" class="icon-1 icon-menu" data-id="1" data-value="Cleaning">Cleaning</a></li> <li><a href="javascript:;" class="icon-4 icon-menu" data-id="4" data-value="Plumbing">Plumbing</a></li> <li><a href="javascript:;" class="icon-5 icon-menu" data-id="5" data-value="Appliances">Appliances</a></li> <li><a href="javascript:;" class="icon-20 icon-menu" data-id="20" data-value="Painting">Painting</a></li> <li><a href="javascript:;" class="icon-6 icon-menu" data-id="6" data-value="Carpentry">Carpentry</a></li> <li><a href="javascript:;" class="icon-3 icon-menu" data-id="3" data-value="Electrical">Electrical</a></li> </ul> </div> </div> <div class="clearfix"></div> </div> </div> </div> </div> </section>
.section { position: relative; background-image: url('https://www.helpr.in/images/backgrounds/section-light-bg.png'); background-position: bottom center; background-repeat: repeat-x; } .section-inverse-color { background-image: url('https://www.helpr.in/images/backgrounds/section-dark-bg.png'); background-color: #222222; color: #5a5a5a; } .helpr-section { height: 100%; background: #655f58 url('https://www.helpr.in/images/backgrounds/helpr-bg1.jpg'); background-repeat: no-repeat; background-position: top center; background-size: cover; } .helpr-text { height: 575px; } .webHomeTitle { display: block; } .home-service { width: 600px; margin: 40px auto 100px auto; border-radius: 8px; background: #fff; -webkit-box-shadow: 0 4px 8px rgba(2,2,2,0.14); -moz-box-shadow: 0 4px 8px rgba(2,2,2,0.14); box-shadow: 0 4px 8px rgba(2,2,2,0.14); position: relative; height: 65px; } .wrapper-demo1 { width: 200px; float: left; position: relative; margin: 11px 0 0 15px; } .wrapper-dropdown-3 { position: absolute; width: 200px; margin: 0 auto; padding: 7px 10px 7px 30px; border: 1px solid #fff; border-right: 1px solid #e5e5e5; background: #fff; cursor: pointer; outline: none; font-size: 20px; background: url(https://www.helpr.in/images/city-arw.png) no-repeat left 12px; } .helpr-title { padding: 190px 0 10px; font-size: 70px; line-height: 80px; -webkit-text-shadow: 0 4px 6px rgba(0,0,0,.20); -moz-text-shadow: 0 4px 6px rgba(0,0,0,.20); text-shadow: 0 4px 6px rgba(0,0,0,.20); font-family: 'LatoWebBlack', 'Helvetica Neue', Helvetica, Arial, sans-serif; text-align: center; color: #ffffff; margin: 0; position: relative; } .helpr-content { position: relative; display: table; height: 100%; width: 100%; } .wrapper-dropdown-2 span.active, .wrapper-dropdown-3 span.active { color: #5a5a5a; } @media (max-width: 3000px){ .helpr-section, .cleaning-section, .pestcontrol-section, .electrical-section, .plumbing-section, .carpentry-section, .ac-section, .geyser-section, .about-section, .career-section, .confirm-section, .contact-section, .deepcleaning-section, .appliances-section, .vehiclecare-section, .subscr-section, .platinum-section, .homespa-section, .homeguard-section, .laundry-section, .painting-section { margin: 0 0 0 0; } .helpr-text { width: 100%; display: block !important; } .helpr-content { text-align: left; } } .wrapper-demo { width:370px; float:left; position:relative; margin:11px 0 0 0px; } .wrapper-demo:after { clear: both; content: ""; display: table; } .wrapper-demo1 { width:200px; float:left; position:relative; margin:11px 0 0 15px; } .wrapper-demo1:after { clear: both; content: ""; display: table; } /* DEMO 2 */ .wrapper-dropdown-2 { /* Size and position */ position: absolute; /* Enable absolute positionning for children and pseudo elements */ width: 370px; margin: 0 auto; padding: 7px 20px; border:1px solid #fff; /* Styles */ background: #fff; cursor: pointer; outline: none; font-size:20px; } .wrapper-dropdown-3 { /* Size and position */ position: absolute; /* Enable absolute positionning for children and pseudo elements */ width: 200px; margin: 0 auto; padding: 7px 10px 7px 30px; border:1px solid #fff; border-right:1px solid #e5e5e5; /* Styles */ background: #fff; cursor: pointer; outline: none; font-size:20px; background:url(../images/city-arw.png) no-repeat left 12px; } .wrapper-dropdown-2 span.active, .wrapper-dropdown-3 span.active{ color: #5a5a5a; } .wrapper-dropdown-2:after { content: ""; width: 0; height: 0; position: absolute; right: 16px; top: 50%; margin-top: 0px; border-width: 6px 6px 0 6px; border-style: solid; border-color: grey transparent; } .wrapper-dropdown-3:after { content: ""; width: 0; height: 0; position: absolute; right: 16px; top: 50%; margin-top: 0px; border-width: 6px 6px 0 6px; border-style: solid; border-color: grey transparent; } .wrapper-dropdown-2 .dropdown { /* Size & position */ position: absolute; top: 110%; left: -216px; right: 0px; /* Styles */ background: #fafafa; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; list-style: none; /* Hiding */ opacity: 0; pointer-events: none; margin:0; padding:0; z-index:99999; -webkit-box-shadow: 0 4px 8px rgba(2,2,2,0.14); -moz-box-shadow: 0 4px 8px rgba(2,2,2,0.14); box-shadow: 0 4px 8px rgba(2,2,2,0.14); z-index:999999 !important; width:600px; border-radius: 0px 0px 8px 8px; } .wrapper-dropdown-3 .dropdown { /* Size & position */ position: absolute; top: 110%; left: -1px; right: 0px; /* Styles */ background: #fafafa; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; list-style: none; /* Hiding */ opacity: 0; pointer-events: none; margin:0; padding:0; z-index:99999; -webkit-box-shadow: 0 4px 8px rgba(2,2,2,0.14); -moz-box-shadow: 0 4px 8px rgba(2,2,2,0.14); box-shadow: 0 4px 8px rgba(2,2,2,0.14); z-index:999999 !important; } .wrapper-dropdown-2 .dropdown li{ float:left; width:300px; } .wrapper-dropdown-2 .dropdown li a { display: block; text-decoration: none; color: #5a5a5a; padding: 0px 50px; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; font-size:18px; line-height:50px; border-bottom:1px solid #e6e6e6; margin:0 7px; z-index:999999 !important; width:80%; } .wrapper-dropdown-3 .dropdown li a { display: block; text-decoration: none; color: #5a5a5a; padding: 0px 10px 0 25px; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; font-size:18px; line-height:50px; border-bottom:1px solid #e6e6e6; margin:0 7px; z-index:999999 !important; } .wrapper-dropdown-2 .dropdown li i, .wrapper-dropdown-3 .dropdown li i { margin-right: 5px; color: inherit; vertical-align: middle; } /* Hover state */ .wrapper-dropdown-2 .dropdown li:hover a, .wrapper-dropdown-3 .dropdown li:hover a { color: #00c6ff; } /* Active state */ .wrapper-dropdown-2.active:after, .wrapper-dropdown-3.active:after { border-width: 0 6px 6px 6px; } .wrapper-dropdown-2.active .dropdown,.wrapper-dropdown-3.active .dropdown { opacity: 1; pointer-events: auto; } /* No CSS3 support */ .no-opacity .wrapper-dropdown-2 .dropdown, .no-pointerevents .wrapper-dropdown-2 .dropdown,.no-opacity .wrapper-dropdown-3 .dropdown, .no-pointerevents .wrapper-dropdown-3 .dropdown { display: none; opacity: 1; /* If opacity support but no pointer-events support */ pointer-events: auto; /* If pointer-events support but no pointer-events support */ } .no-opacity .wrapper-dropdown-2.active .dropdown, .no-pointerevents .wrapper-dropdown-2.active .dropdown,.no-opacity .wrapper-dropdown-3.active .dropdown, .no-pointerevents .wrapper-dropdown-3.active .dropdown { display: block; } .icon-menu{ background-repeat:no-repeat; background-size:30px 30px; background-position:10px center; } .icon-1{ background-image:url(https://www.helpr.in/images/cleaning.png); } .icon-2{ background-image:url(https://www.helpr.in/images/pest.png); } .icon-3{ background-image:url(https://www.helpr.in/images/electrical.png); } .icon-4{ background-image:url(https://www.helpr.in/images/plumbing.png); } .icon-6{ background-image:url(https://www.helpr.in/images/carpentry.png); } .icon-5{ background-image:url(https://www.helpr.in/images/appliances.png); } .icon-17{ background-image:url(https://www.helpr.in/images/geyser.png); } .icon-15{ background-image:url(https://www.helpr.in/images/ac.png); } .icon-19{ background-image:url(https://www.helpr.in/images/vehiclecare.png); } .icon-20{ background-image:url(https://www.helpr.in/images/painting.png); } .icon-21{ background-image:url(https://www.helpr.in/images/laundry.png); } .icon-22{ background-image:url(https://www.helpr.in/images/interiordesign.png); } .icon-23{ background-image:url(https://www.helpr.in/images/automation.png); } .icon-24{ background-image:url(https://www.helpr.in/images/computer_repair.png); } /* No CSS3 support: none */
$(document).ready(function(){ $(".wrapper-dropdown-3").on("click",function(){ $(this).toggleClass("active") }) $(".wrapper-dropdown-2").on("click",function(){ $(this).toggleClass("active") }) })

Related: See More


Questions / Comments: