Adding MENU Text After Hamburger Icon in Bricks

Update: Check out a better version by Jeff Brigman here.

Looking to add the word MENU before or after the hamburger menu icon in Bricks?

We can use ::after pseudo-element and set its content to MENU.

Step 1

Edit your Header template.

Assuming that it has a Section with Logo and Nav Menu elements inside the Section’s Container, select the Container and ensure that “Align main axis” is set to “Space between”.

Step 2

Select the Nav Menu and add this under STYLE → Custom CSS:

root .bricks-mobile-menu-toggle::after {
	content: "Menu";
	text-transform: uppercase;
	font-size: 1.4rem;
	position: absolute;
	left: 28px;
	top: 0;
	letter-spacing: 1px;
}

root .bricks-mobile-menu-toggle {
	margin-left: -72px;
}

Step 3

Set the Width under MOBILE MENU to 100%.