Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #1225769

    Hi there,

    i have the exactly same Problem shown in this thread: https://kriesi.at/support/topic/burger-menu-on-scroll/

    I copied the Ajax and the CSS. The problem: It does change on scroll, but my Burger is visible together with the main menu.

    And how can i get the Burger to the top, in the middle of the blue field?

    Thanks, your Theme is just great!

    #1226658

    Hi,

    i did it myself now somehow.

    My problem ist now, how can i make sure that on mobile and tablet, the menu ist alway a burger symbol?
    And how do i get the burger symbol in Desktop-Mode to the top right ?

    Thanks

    *P.S. you can answer in german or english.

    • This reply was modified 1 week, 6 days ago by  surfklaus.
    #1226718

    Hi,

    Thank you for the inquiry.

    You might have to wrap the custom css code inside a css media query so that it’s only loaded on large screens.

    @media only screen and (min-width: 1024px) {
      /* Add your Desktop Styles here */
    
    }
    

    And also prevent the script from executing by creating a condition that checks for the current width of the browser view port.

    if($(window).width() > 1024) {
       avia_scroll_top_menu();
    } else {
       // no way jose
    }
    

    `

    Best regards,
    Ismael

    #1226750

    Hi Ismael,

    thx you very much for your help, Ismael! :-)

    This doesn’t work for me.
    Following problem: at the moment i have a horizontal navigation. You can see ist on the page. When the User scrolls down, i have a Burger Symbol. That works. So far so good!

    But i want the Burger Symbol on the top, left beside the search symbol.
    On Tablet or Mobile, i want exclusively the Burger Symbol. And is there a way, that i can have on specific Pages (Shop, Cart etc.) only the Burger Symbol as well?

    best regards
    Klaus

    P.S. where should your script go? In the function.php?

    • This reply was modified 1 week, 6 days ago by  surfklaus.
    #1227894

    Hi,
    Any other ideas?

    #1228222

    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

    #1229120

    Ismael, thank you very very much for your patience!
    If you could test ist… it is not really working for me.

    best regards
    Klaus

    #1229393

    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

    #1229401

    Great Ismael, thank you! 😊

    One more thing. How can show only the burger on specific pages? Without scrolling. The Burger should be the Standard-Menu on this sites – Shop, Cart etc..
    I tried with conditional comments, but it didn’t work.

    best regards
    Klaus

    #1229985

    Hi,

    any clues to show only the Burger Symbol on Shop and Cart Page?

    best regards
    Klaus

    #1230168

    Hi,

    Thank you for the update.

    You can use this css code to hide the main menu on a specific page and only display the burger icon.

    .page-id-209 #avia-menu .menu-item {
        display: none !important;
    }
    
    .page-id-209 .av-burger-menu-main {
        display: block !important;
    }

    Just replace the number 209 with the actual ID of the shop or cart page.

    Best regards,
    Ismael

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

You must be logged in to reply to this topic.