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.

Instant access to all 250+ Bricks code tutorials with BricksLabs Pro

3 comments

  • Thanks, Sridhar for these tutorials, great initiative!
    None of the above works, even updates. I tried them all. I wanted the mobile breakpoint to happen earlier, like 820px.
    If I choose their Mobile menu, shows at breakpoint Tablet portrait, only switching off the regular menu part works, then until 767px there is no hamburger menu - nothing, and only at 767px appears. So half of CSS works.

      • I find the CSS that works for me. The important thing is the second CSS part with color ( I have dark color menu background, and that is most probably why it did not work ) :
        @media (max-width: 820px) {
        #brxe-cmyhps .bricks-nav-menu-wrapper {
        display:none !important;
        }

        #brxe-cmyhps .bricks-mobile-menu-toggle {
        display: block !important;
        }
        }

        @media (max-width: 820px) {
        #brxe-cmyhps .bricks-mobile-menu-toggle {
        color:#ffffff !important;
        }
        }

Leave your comment