How to Change the Hamburger Trigger Breakpoint in Bricks

Update: This option is built-into Bricks and following custom CSS is not needed.

For the Nav Menu element, use the “Show Mobile Menu Toggle” dropdown.

The menu output by Nav Menu element of Bricks collapses to a hamburger at 767px.

At the moment there doesn’t seem to be an option to change this in the settings or the builder.

But we can add the following CSS in the interim to trigger it at the lower breakpoint of 479px instead:

@media (max-width: 767px) {
	.brxe-nav-menu .bricks-mobile-menu-toggle.mobile_landscape {
		display: none;
	}

	.brxe-nav-menu .bricks-nav-menu.mobile_landscape {
		display: flex !important;
	}
}

@media (max-width: 479px) {
	.brxe-nav-menu .bricks-mobile-menu-toggle.mobile_landscape {
		display: inline-block;
	}

	.brxe-nav-menu .bricks-nav-menu.mobile_landscape {
		display: none !important;
	}
}

Custom CSS can be added at Bricks → Settings → Custom Code.