How to change when Menu switches to Off Canvas Menu (Screen Size)

I would love to. How do I send a photo in here?

I can not just download any software here. All I want is for you to go to our website and push your browser smaller so that you see that our menu is not above the main picture anymore, put in the picture.

Hello, yes exactly, that is the issue.

But this does not solve my problem. All I want is for the automatic change to the burger menu (that happens anyway, when the screen gets too small) to happen earlier. I do not want the menu to have two lines. I want the menu to switch to burger menu as soon as it doesnt fit on the screen anymore.

Hi Jan .

Try this code

@media (max-width: 1399px) {
    .sp-megamenu-parent {
        display: none !important;
    }
    #offcanvas-toggler {
        display: flex !important;
    }
}

or for your specific case

@media (max-width: 1399px) {
    #sp-header .sp-module {
        max-width: 170px;
    }
    .sp-megamenu-parent>li>a,
    .sp-megamenu-parent>li>span {
        padding: 0 10px;
    }
}
@media (max-width: 1199px) {
    .sp-megamenu-parent {
        display: none !important;
    }
    #offcanvas-toggler {
        display: flex !important;
    }
}

Thank you! That worked. But after updating joomla the Code Changes were deleted. Will we have to add the code again after every update? Or is there a way around that?

These data seem to be deleted when updating Helix-Ultimate:
templates/shaper_helixultimate/scss/responsive.scss
/templates/shaper_helixultimate/css/template.css