Hamburger with traditional menu

Hi Phil,

Do you mean that you want the mobile menu to be more or less like the desktop version once the icon has been clicked?

Best regards,
Rikard

Hi Phil,

Sorry for the late reply and thanks for the info. I’m not sure if that is something which could be easily achieved with CSS, my initial thought was that it would be out of scope of theme support but send us a link to the site in question and we’ll have a look at it.

Best regards,
Rikard

Hi,

This is not possible if the burger menu is active. A workaround is to disable the burger menu, display a default menu then re-create the burger menu manually. Please add these codes in the functions.php file.

if(!function_exists('avia_append_burger_menu_mod'))
{
	add_filter( 'wp_nav_menu_items', 'avia_append_burger_menu_mod', 9998, 2 );
	function avia_append_burger_menu_mod( $items, $args )
	{
	   if ((is_object($args) && $args->theme_location == 'avia'))
	    {
	        $items .= '<li id="menu-item-burger-mod" class="av-burger-menu-main-mod">
	        			<a href="#">
							<span class="av-hamburger av-hamburger--spin av-js-hamburger">
					        <span class="av-hamburger-box">
						          <span class="av-hamburger-inner"></span>
						          <strong>'.__('Menu','avia_framework').'</strong>
					        </span>
							</span>
						</a>
	        		   </li>';
	    }
	    return $items;
	}
}

add_action('wp_footer', 'ava_custom_script');
function ava_custom_script(){
?>
<script type="text/javascript">
(function($) {
	function a() {
		var nav     = $('#avia-menu'),
			items   = nav.find('li:not(".av-burger-menu-main-mod")'),
			burger  = $('.av-burger-menu-main-mod a');

		burger.click( function(e) {
			if(items.hasClass('burger_mod')) {
				items.removeClass('burger_mod');
				burger.find('.av-hamburger').removeClass("is-active");
			} else {
				items.addClass('burger_mod');
				burger.find('.av-hamburger').addClass("is-active");
			}
			e.preventDefault();
		});
	}

	a();
})(jQuery);
</script>
<?php
}

And this code in the Quick CSS field.

.av-main-nav li {
    opacity: 0;
}

.av-main-nav .av-burger-menu-main-mod {
    opacity: 1;
}

.av-main-nav li.burger_mod {
    opacity: 1;
    -webkit-transition: opacity 0.4s ease-in-out;
    transition: opacity 0.4s ease-in-out;
}

Best regards,
Ismael