Tagged: Burger Menu, Desktop, scroll
-
AuthorPosts
-
March 27, 2020 at 9:19 am #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!
March 29, 2020 at 3:38 am #1198752Hey _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,
MikeMarch 29, 2020 at 3:48 am #1198758Hi 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 :)
- This reply was modified 4 years, 7 months ago by _studiotwelve.
March 29, 2020 at 6:47 am #1198778Managed 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?
- This reply was modified 4 years, 7 months ago by _studiotwelve.
March 29, 2020 at 1:24 pm #1198808Hi,
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,
MikeMarch 30, 2020 at 4:05 pm #1199099Hi Mike, no problem – I’ve managed to fix it :) All is good.
Thanks for your help! The support team at Enfold has been outstanding.
March 30, 2020 at 7:26 pm #1199162Hi,
I’m glad this was resolved. If you need additional help, please let us know here in the forums.
Best regards,
Jordan Shannon -
AuthorPosts
- The topic ‘Burger Menu On Scroll’ is closed to new replies.