Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • July 25, 2018 at 2:40 am #989459
    worleytm

    Hi There –

    I’d like the main menu to disappear and the burger menu to appear on scroll (on desktop).

    – When page opens, normal menu appears on right (with logo on the left).
    – When user scrolls, sticky main menu is replaced by burger menu (with logo on the left).

    I’ve found a thread similar to my issue, but the code provided is not working for my site.
    (https://kriesi.at/support/topic/ (Purchase code hidden if logged out) /)

    Please advise and thanks so much,
    T

    July 25, 2018 at 11:01 am #989616
    Ismael

    Hey worleytm,

    Thank you for using Enfold.

    That is possible. You can try this script in the functions.php file.

    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 < 200)
							{
								menu.addClass('hide_menu_show_burger');
								menu.removeClass('hide_burger_show_menu');
								burger.removeClass('hide_menu_show_burger');	
							}
							else if(menu.is('.hide_menu_show_burger')) 
							{
								burger.addClass('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
}

    And then add this css code on the Quick CSS field.

    .responsive #top .av-main-nav .menu-item {
  display: none;
}

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

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

.hide_menu_show_burger {
  display: none !important;
}

.hide_burger_show_menu {
  display: block !important;
}

    Best regards,
    Ismael

    July 25, 2018 at 4:09 pm #989768
    worleytm

    Thanks Ismael!
    This is pretty close but I need it to work opposite of how it functions now.
    Currently, burger is shown on load and main nav shows on scroll and I need:
    Main nav to show on load and burger to appear on scroll.
    Thanks again. You guys are awesome.
    Cheers,
    T

    July 25, 2018 at 4:31 pm #989781
    worleytm

    Also, the burger menu is blank on click and nothing shows up during flyout.

    July 25, 2018 at 4:45 pm #989789
    Yigit

    Hi,

    Could you please post WP admin logins here privately so we can look into it? :)

    Cheers!
    Yigit

    July 25, 2018 at 4:51 pm #989793
    worleytm

    Sure thing!

    July 26, 2018 at 7:11 am #990072
    worleytm

    Ok, I used Ismael’s code provided with a few edits (replaced “menu” with “burger” and vice versa) as you can see in the functions.php file in the backend.

    However, now, I’m facing the following issues:

    Safari 11.1.2 – The main nav appears on load (check!), the main nav is replaced by the burger on scroll (great!), but when clicking on the burger, the burger flyout is blank (help!)

    Chrome 67.0.3396.99 – The main nav appears on load and the burger appears to the right of the main nav (help!), the main nav is replaced by the burger on scroll (wonderful!), and the burger flyout shows the navigation (awesome!).

    Any suggestions?

    July 26, 2018 at 7:38 am #990086
    Ismael

    Hi,

    We adjust the script a bit. The mobile menu items display properly now.

    Best regards,
    Ismael

    July 26, 2018 at 7:49 am #990094
    worleytm

    Thanks! I can see that the burger menu on flyout is functioning and not blank, however, I’m seeing the burger to the right of the main nav on load. Any way to get rid of that and only have the burger appear on scroll? So close!

    July 27, 2018 at 9:40 am #990592
    Ismael

    Hi,

    It’s fixed now. Please remove the browser cache prior to checking the page.

    Best regards,
    Ismael

    July 27, 2018 at 11:55 pm #990846
    worleytm

    Thanks again Ismael –
    The menu on load and scroll looks great, however, the flyout burger menu is not rendering properly and is blank on click. What do you recommend for this fix?
    Much appreciated,
    T

    July 30, 2018 at 4:31 am #991363
    Ismael

    Hi,

    My bad. I added this css code to unhide the mobile menu items.

    .hide_menu_show_burger.av-active-burger-items { 
  display:  block !important;
}

    Best regards,
    Ismael

    July 31, 2018 at 10:03 pm #992091
    worleytm

    Don’t be silly! All GOOD! Thanks for taking the time to solve this menu request. Everything is rendering just fine on my end.
    Thanks again.
    All my best,
    T

    August 1, 2018 at 8:24 am #992246
    Rikard

    Hi T,

    Great, glad you got it working. Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

    August 6, 2018 at 5:37 pm #994005
    worleytm

    Yes, this topic may be closed. Your team is wonderful. Thanks so much Rikard!

    August 6, 2018 at 5:51 pm #994011
    Yigit

    Hi,

    Glad Ismael could help! :)

    For your information, you can take a look at Enfold documentation here – https://kriesi.at/documentation/enfold/
    If you have any other questions or issues, feel free to start a new thread under Enfold sub forum and we will gladly try to help you :)

    Best regards,
    Yigit

  • Author
    Posts
Viewing 16 posts - 1 through 16 (of 16 total)
  • The topic ‘Can Main Menu be replaced by Burger on Scroll?’ is closed to new replies.