Made a mess of nav menu on mobile, etc…!

You added a height of 110px around line 1885 to the .site-header in your css, which is fine for regular laptop/desktop view, but in mobile devices it will limit the navigation to showing up on the white space rather than within the black head-wrap black background after we make adjustments later.

.site-header {
    margin: 0 auto;
    max-width: 1140px;
    height: 110px;
}

So add height: auto; or something in your responsive sections of the css for ipad, and the iphone section as well.

Next you’ll need to adjust the padding and add some margin to the header-right widget area around line 1984. Adjust and add in the code to your css like this –

.header-image .site-header .widget-area {
    padding: 40px 0 20px;
    margin: 40px 0 0;
}

Once you do all of that it should look just like this – http://i.imgur.com/eLfoIDi.png

Let me know if that works..

“it’s got a extra padding underneath creating a grey space between the header and slider”

Thats what the first step was supposed to cover…..although I don’t see it now when I look so I assume you fixed it.

Since you’ve added a different logo just now, (which appears to be a different size) you’ll have to adjust your padding and margins to get the result you want. I would add the bottom padding back like how I had it in the code and then adjust from there, otherwise it won’t have any space between the header and the slider.