I need to create a search box that overlays on top of a carousel image. I currently have the search box positioned absolutely, but it's not responsive as it doesn't stay within the carousel as the width decreases. How can I make it responsive while staying inside the carousel?
Below is my code:
<div class="container-fluid search_bar">
<row>
<div class="col-xs-7 search">
<div class="navbar nav1" role="navigation">
<div class="navbar-header">
<form class="navbar-form form1 " role="search">
<div class="">
<input type="text" class="form_input" placeholder="Type Hospital Name" style="float:left; width: 27%; margin-top: 0; margin-right: 3%;" name="srch-term" id="srch-term">
<select style="float: left; padding: 1px; width: 27%; margin-right: 3%;" class="selectbox1 form_input" >
<option> Speciality </option>
<option> Search in Health Packages </option>
<option> Search in Diagnostic Centres </option>
<option> Search in Doctors </option>
<option> Search in Tests </option>
</select>
<input type="text" class="form_input" placeholder="Type Location" style="float:left; width: 27%; margin-right: 6" name="srch-term" id="srch-term">
<button class="form_button" style="padding: 4px;" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</form>
</div></div></div>
<div class="col-xs-5" style="border: none !important; ">
<div class="social-media">
<ul class="list-unstyled list-inline">
<li> <img src="images/facebook.png" class="img-responsive" style="cursor: pointer;"/> </li>
<li> <img src="images/twitter.png" class="img-responsive" style="cursor: pointer;"/> </li>
<li> <img src="images/google.png" class="img-responsive" style="cursor: pointer;"/> </li>
</ul>
</div>
</div>
</row>
</div>
<div class="col-xs-12">
<div id="myCarousel" class="carousel slide slider" data-ride="carousel">
<!-- Indicators
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol> -->
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="images/homeimage1.jpg" class="img-responsive" >
</div>
<div class="item">
<img src="images/homeimage1.jpg" class="img-responsive" >
</div>
<div class="item">
<img src="images/homeimage1.jpg" class="img-responsive">
</div>
<div class="item">
<img src="images/homeimage1.jpg" class="img-responsive">
</div>
</div>
<!-- Left and right controls -->
<div class="right carousel-control" style="right: -5%; cursor: pointer;" href="#myCarousel" data-slide="next">
<span> <img src="images/right.png" class="img-responsive"/></span>
</div>
<div class="left carousel-control" style="left: 4%; cursor: pointer;" href="#myCarousel" data-slide="prev">
<span> <img src="images/left.png" class="img-responsive"/></span>
</div>
</div>
</div>
And here's the corresponding CSS:
.search_bar {
position: relative;
top: 91px;
left: 10%;
/* margin-left: -0.5%; */
}
.search_bar1 {
position: absolute;
z-index: 3;
margin-top: 8%;
margin-left: 10% !important;
}
@media (max-width: 768px) {
.search_bar1 {
margin-top: 0;
}
}