Burger when scrolling down

Hi,

Sorry for the delay. You have to include the script in the snippet that we provided previously and wrap the css code with the css media query. Please post the login details in the private field so that we can test the modifications. Make sure that the Appearance > Editor panel is accessible.

css media query:

@media only screen and (min-width: 1024px) {
.responsive #top .av-main-nav .menu-item {
  display: block;
}

.responsive #top .av-main-nav .menu-item-avia-special {
  display: block;
}

.responsive .av-burger-menu-main.hide_burger_show_menu {
  display: block;
}

#avia-menu .hide_menu_show_burger {
  display: none !important;
}

#header.av_header_transparency .av-burger-menu-main.hide_burger_show_menu {
	display: none !important;
}

#header.av_header_transparency .av-burger-menu-main:not(.hide_burger_show_menu) {
	display: none !important;
}
}

script:

 add_action('wp_footer', 'ava_burger_toggle_on_scroll');
 function ava_burger_toggle_on_scroll(){
	 ?>
	 <script type="text/javascript">
		 (function($) {
			 function avia_scroll_top_menu()
			 {
					 var win = $(window),
						 menu = $('.responsive #top .av-main-nav .menu-item'),
						 burger = $('.responsive #top .av-main-nav .menu-item-avia-special, .responsive .av-burger-menu-main'),
						 set_status = function()
						 {
							 var st = win.scrollTop();
 
							 if(st > 100)
							 {
								 menu.addClass('hide_menu_show_burger');
								 menu.removeClass('hide_burger_show_menu');
								 burger.removeClass('hide_menu_show_burger');
								 burger.addClass('hide_burger_show_menu');	
							 }
							 else if(menu.is('.hide_menu_show_burger')) 
							 {
								 burger.addClass('hide_menu_show_burger');
								 burger.removeClass('hide_menu_show_burger');
								 menu.removeClass('hide_menu_show_burger');	
								 menu.addClass('hide_burger_show_menu');
							 }
						 };
 
					 win.on( 'scroll',  function(){ window.requestAnimationFrame( set_status )} );
					 set_status();
			 }
                           
                         if($(window).width() > 1024) {
                             avia_scroll_top_menu();
                         }
		 })(jQuery);
	 </script>
	 <?php
 }

Best regards,
Ismael

Hi,

Thank you for the update.

We edited the functions.php file a bit — this line:

 if($(window).width() > 1366) {
			    avia_scroll_top_menu();
			}

The scroll effect should only take effect when the screen width is more than 1366px, and if not the default mobile menu will be shown. If you’re testing this on a browser emulation, you have to refresh the page in order to see the expected behavior.

Best regards,
Ismael

Hi,

Thank you for the update.

Did you remove the account above? We tried to access the dashboard again using that account, but it’s not valid anymore.

We might have to add another condition to the script so that it won’t get applied on certain pages.

if($(window).width() > 1366 || ! $('body').is('.woocommerce-page, .page-id-209') ) {
    avia_scroll_top_menu();
}

This checks if the body container contains the class names “.woocommerce-page” or “.page-id-209”. Please adjust the selectors if necessary.

Best regards,
Ismael