How to overlay a searchbox ona carousel? - html

Question

I have a search box and i want it to overlay on the carousel. Like how it is displayed in the image. I am able to achieve it by positioning the search box Absolute. But it's not responsive. As the width reduces it doesn't stay inside the carousel. How do I make it responsive ??
Here's 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>
here's the 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;
}
}

Answer 1

There is quite a lot of content being displayed within the seach bar and this causes a problem on smaller devices, so I have implemented a possible solution for you here. Basically, on a small display, the search bar will re-position itself under the carousel. You should find that the search bar reacts responsively as the display size changes. I have adjusted your social media icons to sit in a new row below the search options as I think it makes better use of the available space. Of course, it is difficult to know exactly what your requirements are here but I hope this helps. Any questions please let me know.
.navbar-header { width:100%; }
.search_bar {
width:50%;
position: absolute;
z-index:1;
top: 91px;
left: 5%;
/* margin-left: -0.5%; */
}
.search_bar select, .search_bar input, .search_bar button { float:left; margin-top:2px; }
#media (max-width: 500px) {
.search_bar {
position:relative;
top:0;
left:0;
width:100%;
}
}
<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 class="container-fluid search_bar">
<div class="row">
<div class="col-xs-12 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="margin-top: 0; margin-right: 3%;" name="srch-term" id="srch-
term">
<select style="float: left; padding: 3px; 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="margin-right:3%;" 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>
<div class="row">
<div class="col-xs-12" 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>
</div>
</div>
</div>