Replace style in web\css\source _navigation.less in your custom theme.
For Desktop
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
to (your custom width)
@media only screen and (min-width: 1024px) {
And for Mobile
.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
to (your custom width)
@media only screen and (max-width: 1023px) {
Remember one thing you have to add max-width is -1 from min-width.
The JS for the menu that has that functionality can be found in
lib/web/mage/menu.js
First create the folder structure in your theme ex:
[Namespace]/[theme_name]/web/mage/
And copy menu.js from lib/web/mage/menu.js to [Namespace]/[theme_name]/web/mage/menu.js
And change
mediaBreakpoint: '(max-width: 768px)'
to
mediaBreakpoint: '(max-width: 1025px)'