Twenty eleven mobile menu, header, and search bar

When I display my website (https://www.jpehs.co.uk) on iPhone the menu displays poorly: the individual menu items appear in a single left-justified column that only takes up about a third of the available width of the iPhone screen, and readers consequently have to scroll way down a page before they can see any of the page content. The header image and search bar also clutter up the top of the screen

Ideally I’d like to achieve two things in the mobile version:

1. Remove the header image and search bar
2. Have the menu, which has six items, display as one (in landscape) or two (in portrait) lines that stretch across the full width of the display, so that the reader can immediately see the content.

I presume I need to change some settings under ‘/* =Responsive Structure’ in style.css (I’m already using a child theme), but I don’t know what to do. I’d really appreciate any advice.