Overlay featured image with search form

Hi there, currently I’m seeing three search forms on your site. The one in the top header, the one in the #custom-sidebar below the featured image on the home page, and the one you have in the footer widget area. From the image you referenced, it looks like you are wanting to move the one below the image up and over the image. If I am incorrect, please let me know.

The following CSS can be used to move the search widget in the custom-sidebar up and over the image. On screens/windows less than 886px wide, the header image reduces considerably in height, so what I have done is to use a Media Query to limit this to 886px and wider screens. at 885px and narrower it moves back into position in the Custom Sidebar below the image.

@media screen and (min-width: 886px) {
  #search-4 {
    position: absolute;
    top: 100px;
    z-index: 1;
    left: 50px;
  }
  #page {
    position: relative;
  }
}

See what you think, and feel free to clarify if I am off target.

If you have not yet done so, I would suggest creating a child theme so that any customizations you make will not be overwritten by a future theme update. Alternately you can use the Edit CSS function in the Jetpack plugin, or use one of the other Custom CSS plugins that will keep CSS changes from being overwritten.

Child Themes
Child Theme creation plugins
Jetpack plugin
Custom CSS plugins

Thanks Sacredpath, you rock!!!

Yup, I am editing it with the Edit CSS function in the Jetpack plugin ?? Anyway, by any chance you know how to change the width of the input box for the search form and remove the black round pointer to the left of the search form?

Super, and thanks. For the search input box, that is over your image, you can add the following and adjust the width as you desire.

#custom-sidebar input[type="search"] {
    width: 100px;
}

I’m not seeing a black rounded pointer to the left of the search input box or on a search result page. Can you take a screenshot and upload it to one of the file sharing services and provide a link to it?

Thanks sacredpath! I managed to figure the black rounded pointer myself! You code works great! Can’t thank you enough for the help you’ve given! ??

You are welcome, and let us know if you have additional questions.