CSS Issue - mobile view - Search

So I am evaluating the healthcare them and I have noticed in my mobile view (phone - portrait) that the white area that highlights the search funchtion is underneath my logo and I am not sure what is the best method to correct with CSS.

you can view it here (on a phone):

www.claycountypodiatry.com


With that said - it might be my logo as I am not sure what the maximum size it may be so any advice on that would be appreciated as well.

Hi!
There is the code:

<style type="text/css"></style>
	
	<style>
#logo {float: left;margin-top: 10px; margin-bottom: 5px;}


</style> 

on your page. This code is not provided by our theme and causes this problem.

It is located on the 77 line of your source code.

Thank you Dave - you are correct I added it to give the logo a better margin, it has been removed and resolved.

May I also ask - what code can I add to Custom CSS in "integration" menu to change the color of the Tablet Menu to more reflect the blue gradient of the menu that I have replaced from the original theme?

If you open the site on a tablet you will see the green - I would like to change that to the same color as the menu viewed on a PC (understanding that I know that the PC menu is a image) but the tablet menu is in the CSS.

Hi!
We don't provide any services for editing themes for individual users. I can only advise you to edit the code:

#mainmenu-container {
		font-family:'expressway_rgbold';
		clear:both;
		background: rgb(176,220,108); /* Old browsers */
		background: -moz-linear-gradient(top,  rgba(176,220,108,1) 0%, rgba(151,201,78,1) 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(176,220,108,1)), color-stop(100%,rgba(151,201,78,1))); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top,  rgba(176,220,108,1) 0%,rgba(151,201,78,1) 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top,  rgba(176,220,108,1) 0%,rgba(151,201,78,1) 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(top,  rgba(176,220,108,1) 0%,rgba(151,201,78,1) 100%); /* IE10+ */
		background: linear-gradient(to bottom,  rgba(176,220,108,1) 0%,rgba(151,201,78,1) 100%); /* W3C */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b0dc6c', endColorstr='#97c94e',GradientType=0 ); /* IE6-9 */	
	}

in the file style.css.

Thank you Dave - that did the trick. Can you tell me the maximum dimensions for the logo in the header allowed? x by x?

This depends on the secondary menu container height. It can be also customized here:

/*------------------------------ MENU ------------------------------*/
	#secondarymenu-container {
		height:135px;
		position:relative;
		z-index:19;
	}

in style.css.
The maximum width is 700px.