Change header media breakpoints

Wondering if someone can help me - I just can't figure out the CSS code I need for this.

Website is https://testing.agneswaterseafood.com.au.

I've created a global header with two sections, one which I want visible for wider screens and the other which I want visible for smaller screens.

Specifically, Section 1 is intended for 1151px width and greater (i.e. desktop view up until the point that the menu text no longer fits into a single line.

And, Section 2 is intended for 1150px width and less (i.e. mobile and tablet views plus some).

I know that I can just make visibility settings but I need to customise the break points just for the global header.

Any help would be appreciated.

 

Correction, given I've made some changes - it should be 1191px width and greater for Section 1. And 1190px and less for Section 2.

 

You're amazing! Thank you! That makes the headers behave how I want.

I'm just struggling with one issue. Mobile, tablet and desktop views are fine but there's some weirdness in that intermediary space between 981px and 1174px (which is what I finally decided on as a new break point).

There's a gap up the top and the header doesn't stick to top. I've looked through so many of the settings and I can't quite understand why it's doing that. The same header works fine on mobile and tablet views and sticks to top for those.