burger menu screen break size

on your page at https://kriesi.at/documentation/enfold/menu/#toggle-id-87
it says
+++++++++
To activate the burger for any custom screen width, update the max-width value in the below code. It is recommended to set the max-width value to be of the screen width just before the elements like the menu starts to run into the logo.

/* Activate burger menu */
@media only screen and (max-width: 1224px) {
#top #header .av-main-nav > li.menu-item {
display: none!important;
}
#top #header .av-burger-menu-main {
cursor: pointer;
display: block!important;
}}
+++++++++
however when I add it to the functions in the child there it gives and error and breaks the site

I want the burger menu to appear in an iPad in portrait mode – currently the menu runs into the logo