Varying mobile break points

Hi William,

– A breakpoint for when the primary navigation menu goes to canvas

You could easily change it at Layout > Primary navigation > Mobile menu breakpoint.

– And then a breakpoint when the theme goes to mobile

It's very complicated and it's beyond the scope of the theme support forum.
Depends on what you want to achieve and if you are using flexbox structure, some CSS might be able to help.

It seems the breakpoint in the customizer is for doing to the 'full' mobile version - I don't mind that but I want a breakpoint for just the menu going to canvas - is this possible?

The breakpoint in customizer is only for primary navigation, it also works for mobile header if it's activated.
https://docs.generatepress.com/article/mobile-navigation/#initiating-the-mobile-navigation-at-a-different-width

So is there a way to separate these, so the breakpoints can be different?

Unfortunately not.

Just to be clear, GeneratePress only allows for one breakpoint - going all the way from desktop to mobile.

What I am wanting is to have a breakpoint to allow the menu to collapse to the canvas menu at a predefined width, and then to go full mobile at a smaller width.

Is there not a @media (min width: ) etc. that could do this in CSS for collapsing the primary menu to canvas?

If not, is this something with funding you could look to provide into your theme?

Or is it possible to make sure the navigation menu in blue does not snap to two rows for the header, but instead shrinks the search bar, until it then snaps to mobile? Issue is that on certain widths between mobile and desktop, the menu doubles in its height:

What I am wanting is to have a breakpoint to allow the menu to collapse to the canvas menu at a predefined width, and then to go full mobile at a smaller width.

Is there not a @media (min width: ) etc. that could do this in CSS for collapsing the primary menu to canvas?

That should be this option here:
https://docs.generatepress.com/article/mobile-navigation/#initiating-the-mobile-navigation-at-a-different-width

But it would change the header to the mobile layout at the same time.

Or is it possible to make sure the navigation menu in blue does not snap to two rows for the header, but instead shrinks the search bar, until it then snaps to mobile?

The search bar width and alignment is set by the plugin itself with this CSS:
https://www.screencast.com/t/m8bPdfvnc

You can write different media queries to make it smaller. For example:

@media (max-width: 1000px) {
    #ajaxsearchpro1_1, #ajaxsearchpro1_2, div.asp_m.asp_m_1 {
         width: 50%;
    }
}