Positioning of Search Bar

Question

I have inserted a search bar by using my websites code injection points and now trying to re position it below my site tag line. Below in an screenshot of what I am trying to accomplish.

My website is www.jobspark.ca

<script type="text/javascript"   
src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">  </script>

<script type="text/javascript">
$(document).ready(function(){
$("#banner-area").prepend("<div id='banner-tagline'>Your British Columbia and Alberta Job Search</div>");
});
</script>
<div class="positionedSearch"></div>

Current CSS for the search bar includes

.positionedSearch {
width: 400px;
height: 45px;
}

Answer 1

I suggest actually putting it in the HTML where you want it placed, as opposed to positioning it from another place...

You can use:

.positionedSearch {
    width: 400px;
    height: 45px;
    position: absolute;
    z-index: 2;
    left: 40%;
    top: 330px;
}

This only works for the full screen media query. Needs to be adjusted for the smaller screens.

Like I said, it would be much better just to place it in that relative area via the JS.. then you can avoid using absolute positioning.

Based on your other question:

Find this line in your CSS and modify it to this:

.sqs-search-ui-button-wrapper {
    background: rgba(255, 255, 255, 0.66);
    max-width: 280px;
}

Answer 2

You can do:

.positionedSearch {
    width: 400px;
    height: 45px;
    position: absolute;
    top: 350px;
    left: 50%;
    margin-left: -200px;
    z-index: 2;
}