I’ve added a new menu location to the theme and assigned a menu to it. When I get down to mobile size, I’d like for it to turn into a Mobile Menu (hamburger). I see in the code for the Primary Menu that Enfold adds an <li class=”av-burger-menu-main menu-item-avia-special “> element automatically.
How can I have that element added to my new menu so a hamburger shows on mobile?
I’ve already added includes -> helper-main-menu.php to my child theme to put the new menu in place.
Hey ClapperConsulting,
It might not work that way, since there can be JavaScript that triggers the menu that is in the header not outside of it.
Best regards,
Victoria
Right. I’m trying to find that JavaScript. It would make sense that the same script that ads the Burger Menu also controls the click event.
Hi,
Sorry for the late reply, the mobile menu is activated by the class on click “av-burger-overlay”
it changes the opacity, which is embedded in “avia.js”
it sounds like you have some experience with jQuery, here’s an example I have for closing the burger menu:
//close burger menu on click
(function($){
$(document).ready(function(){
$('body').click(function(){
$("html").removeClass('av-burger-overlay-active-delayed');
$('.av-burger-overlay').css({opacity:'0'});
// $('.av-hamburger').removeClass('is-active'); this resets menu icon spin - but need to use with a diffent click class
});
});
})(jQuery);
So basically we just need to reverse it, I would like to help more but I will need to see the elements to adjust.
Best regards,
Mike