Enfold – Modify Mobile Menu Trigger Point

WordPress - Enfold Theme Classes / Styling CSS

Snippet Overview

Enfold – Modify Mobile Menu Trigger Point

Enfold by default gives you somewhat limited control over when the mobile menu (hamburger bar) is enabled and the desktop menu is hidden. To override this you simply have to add a few CSS classes to one of the media queries in your theme’s style.css file thus triggering that mobile menu.

To specify an exact screen size add the CSS code below and change the breakpoint (max-width) to whatever size screen you desire.

@media only screen and (max-width: 1024px) { 

	nav.main_menu {
		display: block !important;
	}
	#avia-menu .menu-item {
		display: none;
	}
	.av-burger-menu-main.menu-item-avia-special {
		display: block;
	}
}

To enable the mobile menu on all size screens simply remove the media query.

nav.main_menu {
	display: block !important;
}
#avia-menu .menu-item {
	display: none;
}
.av-burger-menu-main.menu-item-avia-special {
	display: block;
}
0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply