Hi Nikko,

This doesn’t work as I’m trying to have the same effect that the blocks here So I need the text to appear as an overlay only when I mouse over the background image.

Thanks,
J_L

Victoria,

Thanks for that code unfortunately it had no effect on the Woo Commerce product search results. I added it to our child theme functions.php and did a test. The problem is only with the Woo Commerce product posts.

Any other thoughts on something else we can try?

Rikard,
Sorry for the confusion I was reworking the page to try and solve my problem. I attached a screen shot to illustrate the problem I am having.
On the left hand side of the page I have multiple 2/3 Columns and within those columns I have a text block with text. On the right hand side of the page I have 1/3 columns with a supporting image or graphic to illustrate what the text on the right is describing. When the image on the right in the 1/3 column container has a height greater than the text in the 2/3 column container on the left it pushes the next 2/3 column box down. Is there a way to set it up so that the columns on the left are not influenced by the images on the right hand side of the page. I tried putting all of the text in one larger single 2/3 column and all of the images in a larger single 1/3 column but this does not work for responsive. The reason I set it up the way I did was because I wanted the images on a mobile device to flow naturally within the different columns.

Hello Yigit,

Were you able to figure out how to correct the above problem mentioned in post
#718580 above.

Yigit,

Thanks for your reply, I am actually trying to change the search icon in the menu before you click. I believe this is the CSS

#top #menu-item-search > a:before {
}

i did try the below code but the image was very small (same size as fonts in menu)

#top #menu-item-search > a:before {
color: transparent;
background: url(http://www.mypath.com/logo);
background-repeat: no-repeat;
background-size: contain;
background-position: 50% 50%;
}