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?
If I were you, I would suggest hiding the search bar when the browser width falls under 768px (with a CSS media query) and making a new search bar appear in the mobile friendly nav bar at the top only when the browser is under 768px (if that makes sense!)
That's with the assumption that you want the search bar on the mobile version.