Building Custom Mobile Menu with Bricks Builder

In a recent project, I used the Bricks theme and had to build a custom-designed mobile menu. Later on, I shared my site on the Bricks Community Facebook group in a discussion. Many of the members liked the design and wanted to do something similar with the Bricks theme.

As the process is not straightforward, I decided to write this tutorial and walk through the steps. Hopefully, it will be helpful for you!

What Do You Need?

Definitely need Bricks Theme installed. Better to use the Child Theme activated so you don’t lose changes when the theme gets updated.

You need to be able to make changes to the functions.php file to add some functions and some extra CSS styles as well.

That’s it. 🤔

Let’s Start Building

I assume you already have the header template created and it has the nav menu element.

Set the correct Nav Menu and style the element as you like

Here is the default view of the mobile menu on my demo site

Our purpose is to change this content as if we are editing any other page content with the Bricks Builder.

Create a Template for Mobile Menu Content

We are going to replace the default content of the mobile menu with our own from a template. Add your desired content to the template and save changes.

Now we need to add a function on our child theme’s functions.php file to filter the default mobile menu content.

/**
 * Custom Mobile Menu Content
 */

function bricks_custom_mobile_menu_content($items, $args) {
	if( $args->menu_class == 'bricks-mobile-menu' ) {
		$items = do_shortcode( '[bricks_template id="26"]' );
		return $items;
	} else {
		return $items;
	}
}

add_filter('wp_nav_menu_items', 'bricks_custom_mobile_menu_content', 10, 2);
Code language: PHP (php)

This function will use the template we created as the mobile menu content but keep the original menu content for the desktop version. Make sure to change the template ID I used in the code with the correct one you just built.

Now our mobile menu should be looking like this

Something Missing?

You may be wondering how did I add the menu items (original menu links)?

I used something that will automatically add the menu items for me. Also, with the sub-menu toggle to show or hide sub-menu items. This is done with two more functions.

The first one is a shortcode. This shortcode will allow you to add a menu displayed as a list. Add the following code to functions.php of your child theme to avail the shortcode.

/**
 * Display Menu as Shortcode
 */

function display_menu_shortcode($atts, $content = null) {
	extract(shortcode_atts(array( 'name' => null, 'class' => null ), $atts));
	return wp_nav_menu( array(
		'container'  => false,
		'menu' => $name,
		'menu_class' => 'custom-mobile-nav',
		'walker' => new \Aria_Walker_Nav_Menu(),
		'echo' => false )
	);
}

add_shortcode( 'display_menu', 'display_menu_shortcode' );
Code language: PHP (php)

You will need to use the shortcode like this

[display_menu name="YOUR MENU NAME HERE"]Code language: JSON / JSON with Comments (json)

In my case it was:

[display_menu name="Main Menu"]Code language: JSON / JSON with Comments (json)

You can also pass a custom class if you want.

Now we are going to add another function that will filter the nav menu item title to add our toggle icons. This also goes to the functions.php file like before.

/**
 * Add arrow on parent menu items
 */

function add_arrow( $title, $item, $args, $depth ){
	if( $args->menu_class == 'custom-mobile-nav' && $depth === 0 ){
		if ( in_array("menu-item-has-children", $item->classes) ) {
			$icon_html = '<button class="bricks-mobile-submenu-toggle icon-right"><i class="mobile-menu-icon-svg close ti-angle-up"></i><i class="mobile-menu-icon-svg open ti-angle-down"></i></button>';
			$title = $title . $icon_html;
		}
	}
	return $title;
}

add_filter( 'nav_menu_item_title', 'add_arrow', 10, 4 );
Code language: PHP (php)

The next thing you need is some custom CSS code added to make it look nice. You can use your own CSS code if you like. Here is mine for a quick start. Feel free to change the variables or any other part to match your design.

:root {
    --mm-a-padding: 30px;
    --mm-sm-link-size: 40px;
}

.custom-mobile-nav {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

.custom-mobile-nav ul.sub-menu {
    display: none;
}

.custom-mobile-nav li.menu-item-has-children {
    position: relative;
}

.custom-mobile-nav li.menu-item-has-children a button {
    position: absolute;
    top: 0;
    right: calc( var(--mm-sm-link-size) / 2 );
    font-family: themify;
    font-size: 1rem;
    display: inline-block;
    width: var(--mm-sm-link-size);
    height: var(--mm-sm-link-size);
    text-align: center;
    line-height: var(--mm-sm-link-size);
    cursor: pointer;
    color: #fff;
}

.custom-mobile-nav li a {
    padding: 0 var(--mm-a-padding) !important;
    display: block !important;
    line-height: var(--mm-sm-link-size) !important;
}
Code language: CSS (css)

I hope this tutorial helps you with your future projects. Feel free to share your feedback or if you have any questions.

Please do not republish this tutorial/parts of it, elsewhere without permission.

Last Updated: July 8, 2022