I'm a bit of a newbie with web design. I'm self-hosting a Wordpress site at noisehole.com, and I'm using the MH Magazine template. I've created a child theme and modified it to include a search bar above the header, outside of the standard widget areas.
However, when viewing the site on a mobile device (or just shrinking the horizontal width of the browser window), you can see that the search bar and the Noisehole logo do not cooperate well with each other.
I'd like to set the page up so that with sufficient width, the search bar appears to the right of the Noisehole logo (as it does today), but on a mobile browser (or small-width desktop browser), the search box appears below the Noisehole logo.
I believe I need to do this in the header.php file (with some additional styling rules in styles.css), but I'm just not strong enough with my PHP skills yet to figure out how. Can anyone help?