Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • April 12, 2019 at 1:15 am #1089798
    ClapperConsulting

    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.

    April 13, 2019 at 4:33 pm #1090388
    Victoria

    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

    May 9, 2019 at 7:46 pm #1099042
    ClapperConsulting

    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.

    May 12, 2019 at 12:05 pm #1099733
    Mike

    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

    October 10, 2019 at 3:41 am #1146718
    barrystrauss
    This reply has been marked as private.
    October 10, 2019 at 4:15 am #1146721
    Mike

    Hi,
    Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

    @media only screen and (max-width: 988px) { 
	#header {
		display: none !important;
	}
}

    Best regards,
    Mike

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.