Menu overlapping logo in portrait mode on iPad

Hi I have followed the help from here, but with no luck:
https://kriesi.at/support/topic/navigation-menu-on-ipad-portrait-view/#post-216753

My code looks like this in avia.js:

// -------------------------------------------------------------------------------------------
// responsive menu function
// -------------------------------------------------------------------------------------------

    function avia_responsive_menu()
    {
    	var win = $(window), header = $('.responsive #header');

    	if(!header.length) return;

    	var menu 			  = header.find('.main_menu ul:eq(0)'),
	    	first_level_items = menu.find('>li').length,
	    	bottom_menu 	  = $('html').is('.bottom_nav_header'),
	    		//switchWidth = 767;
				switchWidth = 1000;

    	if(first_level_items > 7 + header.find('#menu-item-search').length && !bottom_menu)
    	{
    		switchWidth = 989;
    		header.addClass('mobile_menu_tablet');
    	}

And i’ve added this in Quick CSS:

@media only screen and (max-width: 1000px) and (min-width: 768px) {
.responsive .mobile_menu_tablet .main_menu {
display: block;
}
}

But still the theme doesn’t change at 989 to the slide out menu.