Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #1198268

    Hi there,

    I’m looking to insert a burger menu on the desktop (right side of the logo) when the user scrolls.

    So the default/text menu should be visible on load, and then switch to the burger menu on scroll.

    Here are two previous threads with the same issue, but don’t have access the final code.
    https://kriesi.at/support/topic/burger-menu-on-scroll-down-for-desktop-browser/
    https://kriesi.at/support/topic/can-main-menu-be-replaced-by-burger-on-scroll-2/

    Thanks!

    #1198752

    Hey _studiotwelve,
    To have the text menu show on load and the burger menu show on scroll, Try adding this code to the end of your functions.php file in Appearance > Editor:

     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();
    			 }
     
    			 avia_scroll_top_menu();
    		 })(jQuery);
    	 </script>
    	 <?php
     }

    Then add this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

    .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;
    }

    Then clear your browser cache and check.
    I couldn’t login to add this for you because the login url leads to a 404
    I tested this on a default menu setup, so some tweaks may be necessary for your setup.

    Best regards,
    Mike

    #1198758

    Hi Mike, thanks so much for this. Almost perfect! I’ve inserted the code, there’s a minor alignment issue – you’ll see what I mean.

    I’ve updated the login details below so you can get in :)

    #1198778

    Managed to tweak it, fixed the alignment issue with some CSS :)

    My only remaining question – when I click the burger menu, a white bar appears. How do I fix this?

    #1198808

    Hi,
    Glad you were able to tweak it, but I don’t see a “white bar” when I click the burger menu.
    But perhaps the page looks different when logged in, unfortunately, I can’t login it leads to a 404.

    Best regards,
    Mike

    #1199099

    Hi Mike, no problem – I’ve managed to fix it :) All is good.

    Thanks for your help! The support team at Enfold has been outstanding.

    #1199162

    Hi,

    I’m glad this was resolved. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

Viewing 7 posts - 1 through 7 (of 7 total)

The topic ‘Burger Menu On Scroll’ is closed to new replies.